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
等事件。