Input输入框type=number时仍然可以输入特殊字符-、+、e的解决方案

     一、起因

同事用了输入框type=number但测试的时候发现 - 、+ 、 e 都可以输入 

<input type="number" />

查阅了这个属性目前浏览器的支持程度

 

查阅后发现 type = number 在手机浏览器端的支持率很低。表里显示IOS 13.4支持了这个属性，但实测发现虽然弹起了数字键盘，但是仍然可以输入特殊字符。

最奇葩的是当你在支持这个属性的web浏览器端使用 type = number 时，输入 + 、- 、e时，是不会触发onChange的，以至于本来想在onChange时加正则去过滤的方案失败了。

     二、解决

博主最后直接放弃了 type = number 改成 type = text ，然后用正则一招制敌。限制只能输入数字和一个小数点。

这里注意一下传入的是字符串，如果需要数字类型需要强制转换Number一下

<input 
    type="text"
    onChange={e => {if(/^\d*\.?\d*$/.test(e.target.value)) { this.setInput(e) }}}
    value={this.state.inputVal} />

 

 

扫描二维码关注公众号，回复： 15493511 查看本文章