What method should be used to limit the number of input digits in js?

When we use an input input box of type number, we may need to limit the number of input digits. At this time, we usually think of maxlength, but maxlength is not supported when it is of type number. Here are some solutions to this problem problem method.

1) max and min

max and min are supported by the number input box, so if we want to limit the input of 11-digit mobile phone numbers, we can use the following code

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

This will not limit user input, but will prompt the user when submitting.

[Example]

2) oninput event

Slice the excess digits and delete them

1 myInput.oninput = function () {2     if (this.value.length > 4) {3         this.value = this.value.slice(0,4); 
4     }5 }

But This is still slightly different from the logic of maxlength, that is, when we move the cursor between the previously entered numbers, we will find that entering another number will cause the last number to be deleted.

[Example]

3) keydown

The keydown event can help us determine the number of digits in the value in the current input after pressing the number. If it exceeds the number of digits Just return false, so no matter where the cursor is, no new numbers will be entered.

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

But this will cause the delete key (or all keys) to be invalid when 2 numbers are met. ╮(╯﹏╰)╭It’s really embarrassing

[Example]

4) With keypress, keydown and 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>

[Example]

5) input parttern

<input type="text" pattern="\d*" maxlength="2">

But the compatibility is not good, Internet Explorer 10, Firefox, Opera and Chrome support the pattern attribute.

Note: Safari or Internet Explorer 9 and earlier versions do not support the pattern attribute of the tag.

6) input[type=tel]

On mobile devices, input[type=tel] supports maxlength , and can only be entered using the numeric keyboard.

The above is the detailed content of What method should be used to limit the number of input digits in js?. For more information, please follow other related articles on the PHP Chinese website!