當我們使用類型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中文網其他相關文章！
