乐趣区

限制input输入小数只能到3位或者只能输入正整数(兼容ios)

我们在做表单输入时,有时候对于有些输入比较有限制,比如输入天数必须为正整数,再比如有些特殊需求需要输入保留小数点的后面 n 位。那么我们如何在输入环节就限制用户的输入情况呢?
我们可以用正则表达式来限制。
限制 input 输入数字只能输入正整数(包括 0)
<input type=”number” class=”weight-input”
oninput=”this.value=this.value.replace(/\D/g,”);”
pattern=”[0-9]*”> &nbsp; 天
解析

oninput 事件在用户输入时触发,元素值发生变化时立即触发。
D 为非数字,this.value 为 input 输入的值,当输入的值不为数字的时候,就替换成空字符串。
加上 pattern=”[0-9]*”,是为了适应苹果 ios 系统。

限制 input 输入数字只能输入正整数(不包括 0)
<input type=”number” class=”weight-input” min=”1″
oninput=”if(this.value.length==1){this.value=this.value.replace(/[^1-9]/,”)}else{this.value=this.value.replace(/\D/g,”)}” pattern=”[1-9][0-9]*”> &nbsp; 天
解析

min= 1 限制对于输入是没有用的,但是对于 type=”number” 类型的上下点击选择还是有限制作用的,如果正则表达式写的完善的话,min= 1 也可以不加。
oninput 是一个事件,所以事件里面是可以写 js 代码的。

限制 input 输入数字只能输入小数点最多到第三位的数字
<input type=”number” class=”weight-input” min=”0.000″ oninput=”this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/,’$1$2$3′)” pattern=”[0-9]*\.?[0-9]{0,3}”>

/D(d)(.?)(d{0,3})d*/ 解析:加上括号即为分组,分组从左到右分别用 $1,$2,$3 来表示,每个括号为一组。只保留组里面的内容,输入的其他内容都给过滤掉。
pattern=”[0-9]*.?[0-9]{0,3}” 是为了适应苹果 ios 系统

退出移动版