限制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處理，進行刪除

1 myInput.oninput = function () {
2     if (this.value.length > 4) {
3         this.value = http://www.cnblogs.com/dahe1989/p/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 = http://www.cnblogs.com/dahe1989/p/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 = http://www.cnblogs.com/dahe1989/p/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的，而且只能輸入數字鍵盤。

文章來源：