input限制只能输入数字的三种方法

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