input限制只能输入数字并限制长度

37 篇文章 0 订阅
当我们使用类型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的,而且只能输入数字键盘。

https://www.cnblogs.com/dahe1989/p/7089895.html

要实现el-input只能输入数字限制数字长度,可以使用以下代码: 在el-input标签中,添加oninput事件和maxlength属性。oninput事件可以使用正则表达式将非数字字符替换为空,从而只允许输入数字。maxlength属性可以限制输入的字符长度。 例如,可以参考引用中的代码: ``` <el-input placeholder="只能填写24位数字" v-model="scope.row.icode" type="text" maxlength="24" oninput="value=value.replace(/[^\d]/g,'')"></el-input> ``` 另外,也可以参考引用中的代码: ``` <el-form-item label="账号" required> <el-input v-model="form.tele" style="width:160px;" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入账号" type="number"></el-input> </el-form-item> ``` 如果希望在整个项目中统一限制输入数字限制长度,可以在main.js中添加自定义指令。参考引用中的代码,其中使用了Vue.directive来定义一个名为enterNumber的指令,在inserted钩子函数中添加keypress事件监听,通过正则表达式和条件判断来限制只能输入数字并阻止非数字字符的输入。 希望以上信息能帮到您。123 #### 引用[.reference_title] - *1* [vue el-input 只能输入数字限制长度](https://blog.csdn.net/m0_59605357/article/details/123504420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *2* *3* [el-input 只能输入数字限制长度](https://blog.csdn.net/weixin_30781107/article/details/101617919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值