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

最新推荐文章于 2024-05-10 13:55:07 发布

要做前端的一股清流

最新推荐文章于 2024-05-10 13:55:07 发布

阅读量7.5k

点赞数 3

分类专栏： web前端学习文章标签： input type=number 输入框特殊字符校验数字键盘

本文链接：https://blog.csdn.net/qq_31915745/article/details/106474148

版权

22 篇文章 4 订阅

订阅专栏

同事用了输入框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} />

关注