本文介绍了前端开发中限制input元素只能输入数字的三种常见方法：使用HTML5的number类型、pattern属性以及通过JavaScript结合正则表达式来实现输入验证。
input限制只能输入数字的三种方法
在前端开发过程中，我们经常需要对input输入内容进行限制，比如验证码，购物车数量等等。下面我总结一下限制input只能输入数字的几种方法。
H5 number类型
<form action="">
请输入数字：<input type="number"><br>
<input type="submit" value="提交">
</form>
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等） |
H5 pattern属性
<form action="">
请输入数字：<input type="text" pattern=[0-9]*><br>
<input type="submit" value="提交">
</form>
HTML5新增pattern属性，用来规定验证输入字段的正则匹配模式。
使用JavaScript
let input = document.getElementById('number');
input.oninput = function(){
this.value = this.value.replace(/\D/g, '');
}
通过绑定input事件，使用replace方法配合正则即可实现。也可以通过绑定focus、blur、keyup等事件。
扫一扫
4261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
