之所以需要写这个功能,原因是:
<input type="number" maxlength="5" /> <!--无法满足最多只能输入五位正整数的要求-->
- 当type="text",上面代码可以限制五位
- 当type="number",上面代码没法限制五位,可以无限输入位数
- 使用正则还有一个原因是:type="number" 时可以输入 e 字母和 - 字符
解决办法如下:
<input type="text" oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)" />
- 输入的时候将不满足条件的字符用空字符串替换
- 正则解读:/^(0+)|[^\d]+/g
- ^(0+) 的意思是匹配一个或多个0开头的字符
- [^\d] 一个反向字符集。也就是说, 它匹配任何没有包含在方括号中的字符。
- \d 匹配一个数字
。
等价于 [0-9]
。 - [^\d] 的意思就是匹配所有不是数字 0-9 的字符
- 总的意思就是输入的开头为0或多个0的会被去除,输入的内容中(不一定是开头),如果有不是 0-9 的数字的字符也会被去除
- slice(0, 5) 就是限制5位数
- 所以这样就保证了输入的内容一定是正整数
小记一下,希望可以帮助到有需要的同学!