Welche Methode sollte verwendet werden, um die Anzahl der Eingabeziffern in js zu begrenzen?

Wenn wir ein Eingabefeld vom Typ Zahl verwenden, müssen wir möglicherweise die Anzahl der Eingabeziffern begrenzen. Derzeit denken wir normalerweise an maxlength, aber maxlength wird nicht unterstützt, wenn es vom Typ Zahl ist Lösungen für dieses Problem. Problemmethode.

1) Max. und Min.

Max. und Min. werden vom Nummerneingabefeld unterstützt. Wenn wir also die Eingabe von 11-stelligen Mobiltelefonnummern einschränken möchten, können wir den folgenden Code verwenden

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

Dies schränkt die Benutzereingaben nicht ein, sondern fordert den Benutzer beim Absenden dazu auf.

[Beispiel]

2) oninput-Ereignis

Schneiden Sie die überschüssigen Ziffern in Scheiben und löschen Sie sie

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

Aber das ist so Es unterscheidet sich immer noch geringfügig von der Logik von maxlength. Wenn wir also den Cursor zwischen den zuvor eingegebenen Zahlen bewegen, werden wir feststellen, dass die Eingabe einer anderen Zahl dazu führt, dass die letzte Zahl gelöscht wird.

[Beispiel]

3) keydown

Das Keydown-Ereignis kann uns helfen, die Anzahl der Ziffern im Wert in der aktuellen Eingabe zu bestimmen, wenn diese überschritten wird die Anzahl der Ziffern Geben Sie einfach false zurück, sodass keine neuen Zahlen eingegeben werden, egal wo sich der Cursor befindet.

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

Dies führt jedoch dazu, dass der Löschschlüssel (oder alle Schlüssel) ungültig werden, wenn zwei Zahlen erfüllt sind. ╮(╯﹏╰)╭Es ist wirklich peinlich

[Beispiel]

4) Mit Tastendruck, Tastendruck und On-Eingabe

 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>

[ Beispiel ]

5) Eingabeteil

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

Aber die Kompatibilität ist nicht gut, Internet Explorer 10, Firefox, Opera und Chrome unterstützen das Musterattribut.

Hinweis: Safari oder Internet Explorer 9 und frühere Versionen unterstützen das Musterattribut des -Tags nicht.

6) input[type=tel]

Auf Mobilgeräten unterstützt input[type=tel] maxlength und kann können nur über die numerische Tastatur eingegeben werden.

Das obige ist der detaillierte Inhalt vonWelche Methode sollte verwendet werden, um die Anzahl der Eingabeziffern in js zu begrenzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!