input限制只能输入数字并限制长度
程序员文章站
2022-04-06 12:21:24
...
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题的方法。
1)max和min
max和min是number输入框所支持的,这样如果我们要限制输入11位的手机号码,就可以用如下代码
<input type="number" max="99999999999" />
这样不会限制用户输入,但会在用户提交的时候提示。
[示例] https://jsfiddle.net/dahe/cyatq4aw/
2)oninput事件
对多余的位数进行slice处理,进行删除
1 myInput.oninput = function () {
2 if (this.value.length > 4) {
3 this.value = this.value.slice(0,4);
4 }
5 }
但是这还是和maxlength的逻辑略有不同,那就是当我们将光标挪到之前输入的数字之间的时候,我们就会发现,再输入数字,会导致最后面的数字被删除。
[示例] https://jsfiddle.net/dahe/893q05jr/
3)keydown
keydown事件可以帮助我们在按下数字之后,判断一下当前input中的value的位数,如果超过位数就return false,这样不管光标的位置在哪里,都不会输入新的数字。
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
但是这会导致在满足2个数字的时候,再按删除键(或者说是所有按键)失效。╮(╯﹏╰)╭真的尴尬了
[示例] https://jsfiddle.net/dahe/haLLu33L/
4)借助keypress,keydown和oninput
复制代码
1 <input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />
2
3 <script>
4 function maxLengthCheck(object) {
5 if (object.value.length > object.max.length)
6 object.value = object.value.slice(0, object.max.length)
7 }
8
9 function isNumeric(evt) {
10 var theEvent = evt || window.event;
11 var key = theEvent.keyCode || theEvent.which;
12 key = String.fromCharCode(key);
13 var regex = /[0-9]|\./;
14 if (!regex.test(key)) {
15 theEvent.returnValue = false;
16 if (theEvent.preventDefault) theEvent.preventDefault();
17 }
18 }
19
20 function isMoreThan(evt) {
21 var theEvent = evt || window.event;
22 var target = theEvent.target;
23 var keyID = event.keyCode;
24 var isDelete = false;
25 switch (keyID) {
26 case 8:
27 isDelete = true;
28 // alert("backspace");
29 break;
30 case 46:
31 isDelete = true;
32 // alert("delete");
33 break;
34 default:
35 break;
36 }
37
38 if (!isDelete && target.value.length == target.max.length) {
39 return false;
40 }
41 }
42
43 </script>
复制代码
[示例] https://jsfiddle.net/dahe/g3e686qx/
5)input parttern
<input type="text" pattern="\d*" maxlength="2">
但是兼容性不好,Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。
注意:Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 pattern 属性。
[示例] https://jsfiddle.net/dahe/k9ta81ta/
6)input[type=tel]
在移动设备上,input[type=tel] 是支持maxlength的,而且只能输入数字键盘。
上一篇: 如何删除内联块元素之间的空格
推荐阅读
-
js限制输入框只能输入数字(onkeyup触发)
-
js限制input只能输入有效的数字(第一个不能是小数点)
-
使用正则限制input框只能输入数字/英文/中文等等
-
DevExpress的TextEdit限制输入内容的格式,比如只能输入数字
-
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
-
vue2.x directive - 限制input只能输入正整数
-
限制bootstrap-datetimepicker的input输入框只能选择,不允许输入
-
js限制文本框只能输入数字方法小结_javascript技巧
-
jquery教程限制文本框只能输入数字和小数点示例分享
-
input调用数字键盘,并限制输入位数的方法讲解