js中限制輸入的位數該使用什麼方法？

當我們使用類型number的input輸入框的時候，我們可能需要限制輸入的位數，這個時候通常會想到maxlength，但是maxlength是在number類型的時候是不支持的，下面是一些解決這種問題的方法。

1）max和min

max和min是number輸入框所支援的，這樣如果我們要限制輸入11位的手機號碼，就可以用如下碼

<input type="number" max="99999999999" />

這樣不會限制使用者輸入，但會在使用者提交的時候提示。

[範例] 

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，這樣不管遊標的位置在哪裡，都不會輸入新的數字。

<input type="number" onKeyDown="if(this.value.length==2) return false;" />

但這會導致在滿足2個數字的時候，再按刪除鍵（或說是所有按鍵）失效。 ╮(╯﹏╰）╭真的尷尬了

[範例] 

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

[範例]

5）input parttern

<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中文網其他相關文章！