从零开始制作一个兼容双移动端的数字输入框

需求

首先为了能够打开移动端的数字键盘，我们使用type=number的input

1	<input id="num" type="number" maxlength="4" size="4" autocomplete="false">

这时候会发现在Android中已经可以弹出数字键盘了，而在Ios中却还无法调出数字键盘。

兼容Ios的写法为：加上**pattern=”[0-9]“*

1	<input id="num" type="number" maxlength="4" size="4" autocomplete="false" pattern="[0-9]*">

此时已经可以在Ios中正确显示数字键盘了。

当添加pattern=”[0-9]*“后，我们会发现maxlength和size属性失效了。

此时可以通过input的oninput事件来监听输入，在input内容长度超过4时只保留前4位

代码如下：

1	<input id="num" type="number" maxlength="4" size="4" autocomplete="false" pattern="[0-9]*" oninput="if(value.length>4)value=value.slice(0,4);">

在传统Android键盘中，可以通过返回、输入法设置菜单切换到其他类型键盘中，此时可以输入+-.e之类的内容来越过pattern的限制。

其实还是可以通过在oninput中添加判断来过滤字符。

1	<input id="num" type="number" maxlength="4" size="4" autocomplete="false" pattern="[0-9]*" oninput="if(value.length>4)value=value.slice(0,4);value=value.replace(/[^\[0-9\]]/g,'')">

Android效果图：

Ios效果图：