input number解决ios兼容问题

秒速五厘米 2023-07-09 02:03 7阅读 0赞

### 文章目录 ###

*  我们可以用正则表达式来限制。
 *   *  1.限制input输入数字只能输入正整数（包括0）
     *  2.限制input输入数字只能输入小数点最多到第三位的数字
     *  3.自己实战 保留到1位

[https://segmentfault.com/a/1190000018273030][https_segmentfault.com_a_1190000018273030]

> 我们在做表单输入时，有时候对于有些输入比较有限制，比如输入天数必须为正整数，再比如有些特殊需求需要输入保留小数点的后面n位。那么我们如何在输入环节就限制用户的输入情况呢？

# 我们可以用正则表达式来限制。 #

## 1.限制input输入数字只能输入正整数（包括0） ##

<input type="number" class="weight-input" oninput="this.value=this.value.replace(/\D/g,'');" pattern="[0-9]*">   天

解析

> ininput事件在用户输入时触发，元素值发生变化时立即触发。  
> D为非数字，this.value为input输入的值，当输入的值不为数字的时候，就替换成空字符串。  
> 加上pattern="\[0-9\]\*"，是为了适应苹果ios系统。  
> 限制input输入数字只能输入正整数（不包括0）

解析

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

## 2.限制input输入数字只能输入小数点最多到第三位的数字 ##

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

## 3.自己实战 保留到1位 ##

--------------------

完

[https_segmentfault.com_a_1190000018273030]: https://segmentfault.com/a/1190000018273030