当我们使用类型number的input输入框的时候，我们可能需要限制输入的位数，这个时候通常会想到maxlength，但是maxlength是在number类型的时候是不支持的，下面是一些解决这种问题的方法。
max和min是number输入框所支持的，这样如果我们要限制输入11位的手机号码，就可以用如下代码
<input type="number" max="99999999999" />
这样不会限制用户输入，但会在用户提交的时候提示。
[示例]
对多余的位数进行slice处理，进行删除
1 myInput.oninput = function () {2 if (this.value.length > 4) {3 this.value = this.value.slice(0,4);
4 }5 }但是这还是和maxlength的逻辑略有不同，那就是当我们将光标挪到之前输入的数字之间的时候，我们就会发现，再输入数字，会导致最后面的数字被删除。
[示例]
keydown事件可以帮助我们在按下数字之后，判断一下当前input中的value的位数，如果超过位数就return false，这样不管光标的位置在哪里，都不会输入新的数字。
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
但是这会导致在满足2个数字的时候，再按删除键（或者说是所有按键）失效。╮(╯﹏╰）╭真的尴尬了
[示例]
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 }
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
}
}
</script>[示例]
<input type="text" pattern="\d*" maxlength="2">
但是兼容性不好，Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。
注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 标签的 pattern 属性。
6）input[type=tel]
在移动设备上，input[type=tel] 是支持maxlength的，而且只能输入数字键盘。
以上是js中限制输入的位数应该使用什么方法？的详细内容。更多信息请关注PHP中文网其他相关文章！
