当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题的方法。
1)max和min
max和min是number输入框所支持的,这样如果我们要限制输入11位的手机号码,就可以用如下代码
这样不会限制用户输入,但会在用户提交的时候提示。
2)oninput事件
对多余的位数进行slice处理,进行删除
1 myInput.oninput = function() {2 if (this.value.length > 4) {3 this.value = this.value.slice(0,4);4 }5 }
但是这还是和maxlength的逻辑略有不同,那就是当我们将光标挪到之前输入的数字之间的时候,我们就会发现,再输入数字,会导致最后面的数字被删除。
3)keydown
keydown事件可以帮助我们在按下数字之后,判断一下当前input中的value的位数,如果超过位数就return false,这样不管光标的位置在哪里,都不会输入新的数字。
但是这会导致在满足2个数字的时候,再按删除键(或者说是所有按键)失效。╮(╯﹏╰)╭真的尴尬了
4)借助keypress,keydown和oninput
1
2
3
4 functionmaxLengthCheck(object) {5 if (object.value.length >object.max.length)6 object.value = object.va