移动端数字框整理

背景

移动端需要限制输入数字区分小数和整数，限制文字输入。

遇到的坑

输入法	问题	解决方案
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属性配合来达到预期效果。

实现效果

问题
解决后
手机号码
搜狗输入法