移动端踩坑系列(一)————input默认调用数字键盘

时间:2022-10-04 00:32:43

本文是该系列的第一篇,先讲点简单而实用的东西。

默认调用数字键盘是很多项目中常见的需求,但是如何处理却是一个不大不小的坑。

 

当我拿到这个需求的时候第一反应就是

<input type="number">

拿起我的大苹果,恩~~很完美。

不过安卓缺给了我一记狠狠的耳光,在安卓手机上,我们会看到input右侧有两个白点一样的小按钮,不过想想也可以理解,毕竟input number在pc端上本身就是有相关控件的。

 

好吧,我们换一个思路,电话号码必定是数字,而且没有相关控件

<input type="tel">

赶紧看看安卓,恩~~很完美。

不过大苹果又开始打我脸了,这种方式调出的数字键盘类似于拨号键盘,是不可以输入除了-、#、*以外的符号的,当然,你如果只需要输入整数,那么到这里就可以结束了,如果你需要输入小数,那么我们在继续下去。

 

input tel的不可行,让我把目光重新投回了input number身上,通过查找相关资料,我发现了这么一套css属性

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

这样input number的相关控件就消失了,真正的完美了。