[技术分享]完全兼容移动端数字键盘(精品)

shangjin发布于1 个月前 • 71 次阅读

最近有个需求,要求移动端数字键盘彻底兼容,网上查了点方案,发现都有各种各样的问题,那就只能自己再测试兼容了,经过和同事的一系列探讨,终于找到个靠谱的方案。这里说下,ios和安卓,还是有很大不同的。首先我们要定义一个方法,判断ios还是安卓,看下图:

image

这个isIos函数用于判断终端是不是ios,如果是ios设备,那就返回true,如果不是,返回false。然后,我们进行下一步,这里我们input框,ios统一使用type=‘number’,有人说ios要使用type=‘tel’,但是这里经过小编亲测,发现无法屏蔽ios上的顿号等几个标点符号,于是我们ios上使用type=‘number’,如果不是ios,我们使用type=‘tel’,这里有个坑,为啥安卓不能用type=‘number’,因为如果安卓系列使用type=‘number’,会拿不到‘+’,‘-’等符号,但是显示的时候还是在的,因为拿不到这些额外符号,也就没法用正则替换,所以,安卓要用type=‘tel’。我们来重复下结论:ios使用type=‘number’,安卓使用type=‘tel’。

然后我们开始第二步,如果是ios,加个 pattern="[0-9]*"限定范围,老爷机就这么牛逼,真机上只会弹出数字键盘。如果是安卓,我们需要绑定个input事件,具体方法看下图:

image

虽然在安卓上type='tel’是可以输入很多字母的,但是我们通过正则让用户输入无效,规避了这个风险。

共收到 0 条回复