Quelle méthode faut-il utiliser pour limiter le nombre de chiffres d'entrée dans js ?

Lorsque nous utilisons une zone de saisie de type nombre, nous devrons peut-être limiter le nombre de chiffres saisis. À ce stade, nous pensons généralement à maxlength, mais maxlength n'est pas pris en charge lorsqu'il est de type nombre. solutions à cette méthode de problème.

1) max et min

max et min sont pris en charge par la zone de saisie du numéro, donc si nous voulons limiter la saisie de numéros de téléphone portable à 11 chiffres, nous pouvons utiliser le code suivant

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

Cela ne limitera pas la saisie de l'utilisateur, mais l'invitera lors de la soumission.

[Exemple]

2) événement oninput

Coupez les chiffres en excès et supprimez-les

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

Mais c'est encore légèrement différent de la logique de maxlength, c'est-à-dire que lorsque nous déplaçons le curseur entre les nombres saisis précédemment, nous constaterons que la saisie d'un autre nombre entraînera la suppression du dernier numéro.

[Exemple]

3) keydown

L'événement keydown peut nous aider à déterminer le nombre de chiffres dans la valeur dans l'entrée actuelle après avoir appuyé sur le nombre s'il dépasse. le nombre de chiffres Renvoie simplement false, donc peu importe où se trouve le curseur, aucun nouveau numéro ne sera saisi.

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

Mais cela rendra la clé de suppression (ou toutes les clés) invalide lorsque 2 nombres sont rencontrés. ╮(╯﹏╰)╭C'est vraiment embarrassant

[Exemple]

4) Avec keypress, keydown et 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>

[ Exemple ]

5) parttern d'entrée

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

Mais la compatibilité n'est pas bonne, Internet Explorer 10, Firefox, Opera et Chrome supportent l'attribut pattern.

Remarque : Safari ou Internet Explorer 9 et les versions antérieures ne prennent pas en charge l'attribut pattern de la balise

6) input[type=tel]

Sur les appareils mobiles, input[type=tel] prend en charge maxlength et peut être saisi uniquement à l'aide du clavier numérique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!