限制input[type=number]的输入位数策略整理

当我们使用类型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处理，进行删除

 myInput.oninput = function () {

     if (this.value.length > 4) {

         this.value = this.value.slice(0,4);

     }

 }

但是这还是和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

 <input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />

 <script>

   function maxLengthCheck(object) {

     if (object.value.length > object.max.length)

       object.value = object.value.slice(0, object.max.length)

   }

   function isNumeric(evt) {

     var theEvent = evt || window.event;

     var key = theEvent.keyCode || theEvent.which;

     key = String.fromCharCode(key);

     var regex = /[0-9]|\./;

     if (!regex.test(key)) {

       theEvent.returnValue = false;

       if (theEvent.preventDefault) theEvent.preventDefault();

     }

   }

   function isMoreThan(evt) {

     var theEvent = evt || window.event;

     var target = theEvent.target;

     var keyID = event.keyCode;

     var isDelete = false;

     switch (keyID) {

       case 8:

           isDelete = true;

         // alert("backspace");

         break;

       case 46:

           isDelete = true;

         // alert("delete");

         break;

       default:

         break;

     }

     if (!isDelete && target.value.length == target.max.length) {

       return false;

     }

   }

 </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/

秒客网