Home > Web Front-end > JS Tutorial > body text

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

零下一度
Release: 2017-06-29 09:35:40
Original
2474 people have browsed it

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" />
Copy after login

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 }
Copy after login

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;" />
Copy after login

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>
Copy after login

[Example]

5) input parttern

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!