背景
移动端需要限制输入数字区分小数和整数,限制文字输入。
遇到的坑
输入法 | 问题 | 解决方案 |
---|---|---|
IOS输入法 | 明明是数字框点击,但是ios原生输入法点击词频可以输入文字字母 | 通过js替换掉 |
IOS输入法 | 仅仅需要数字,输入法全部显示出来了 | 通过pattern输入法展示数字 |
搜狗输入法 | 存数字输入可以输入小数点 | js解决 |
H5现实 | 能够解决所有问题但是交互差点 | 未开发 |
期待更优解决方案,请留言,谢谢!!
解决方案:
<table>
<tr>
<td>数字框:</td>
<td><input type="number" /></td>
</tr>
<tr>
<td>整数框:</td>
<td><input type="number"
pattern="[0-9]*"
oninput="value=value.replace(/[^0-9]*/g,'')"/>
</td>
</tr>
<tr>
<td>小数框:</td>
<td><input type="number"
oninput="value=value.replace(/[^0-9.]/g,'')" /></td>
</tr>
<tr>
<td>手机号码:</td>
<td><input type="tel" /></td>
</tr>
</table>
总结
js可以替换实现全部效果但是效果不佳,正确合理的使用H5属性配合来达到预期效果。
实现效果
![](https://img.haomeiwen.com/i8410981/ce15fbac755006aa.png)
![](https://img.haomeiwen.com/i8410981/4046d8a940d461c1.png)
![](https://img.haomeiwen.com/i8410981/9b4e2abb878439e0.png)
![](https://img.haomeiwen.com/i8410981/a01bcba2a8121010.png)
网友评论