Nur numerische Eingabe in HTML zulassen

1. Verwenden Sie type="number" im input-Tag, um nur numerische Eingaben in HTML zuzulassen
2. Schreiben die clientseitige Validierung in JavaScript, um nur numerische Eingaben in HTML zuzulassen

Dieser Artikel stellt einige Methoden vor, um nur die numerische Eingabe in das Texteingabefeld in HTML zuzulassen.

Verwenden Sie type="number" im input-Tag, um nur numerische Eingaben in HTML zuzulassen

In HTML verwenden wir das input-Tag, um die Eingaben des Benutzers entgegenzunehmen.

Wir können den Eingabetyp mit dem Attribut type im Tag input angeben. Das input-Tag akzeptiert verschiedene Eingabetypen wie Text, Zahlen, Passwörter, E-Mail usw.

Wir können das Attribut type verwenden, um nur die numerische Eingabe in HTML zuzulassen. Erstellen Sie beispielsweise ein input-Tag mit dem type-Attribut als number.

Erstellen Sie als Nächstes einen Senden-Button. Das Formular wird nicht gesendet, wenn wir Zeichen anstelle von Zahlen eingeben.

Das Verhalten ist jedoch bei den Browsern unterschiedlich.

In Firefox erlaubt das folgende Beispiel beliebige Eingaben im Eingabebereich. Der Wert wird jedoch nicht übermittelt, wenn auf die Schaltfläche geklickt wird.

Im Fall von Chrome können keine anderen Zeichen als die numerischen Zeichen eingegeben werden. Firefox erlaubt das Einfügen der anderen Eingaben, Chrome jedoch nicht.

Wenn wir beispielsweise einen zufälligen Text kopieren und in den Eingabebereich in Firefox einfügen, wird der Text eingefügt, aber dies geschieht nicht in Chrome. Dieses Verhalten ist auch beim Ziehen und Ablegen von Inhalten in den Textbereich identisch.

Um also eine gewisse Validierung hinzuzufügen, können wir die Drag-and-Drop- und Einfügevorgänge im Textbereich deaktivieren. Schreiben Sie zum Beispiel die Attribute ondrop und onpaste in das Tag input und schreiben Sie return false; als ihre Werte.

Dadurch werden die Copy-Paste- und Drag-and-Drop-Funktion im Textbereich deaktiviert.

Beispielcode:

 <form action="">
 <input type="number" ondrop="return false;" onpaste="return false;" />
 <button type="submit" value="Submit">Click</button>
 </form>

Schreiben die clientseitige Validierung in JavaScript, um nur numerische Eingaben in HTML zuzulassen

Obwohl die obige Methode nicht in allen Browsern perfekt funktioniert, muss eine clientseitige Validierung hinzugefügt werden, damit nur numerische Werte in den Textbereich eingegeben werden können. Dafür müssen wir etwas JavaScript schreiben.

Wir müssen eine solche Validierung hinzufügen, bei der die Eingabe ab dem Wert 0-9 nur akzeptiert werden kann. Dafür haben wir ein Event onkeypress in JavaScript.

Das Ereignis onkeypress wird ausgeführt, wenn der Benutzer die Taste drückt. Im Event onkeypress können wir nur die Werte zwischen 0-9 zurückgeben.

Wir können die Eigenschaft charCode verwenden, um den Zeichencode der gedrückten Eingabe zu erhalten.

Schreiben Sie beispielsweise das Ereignis onkeypress als Attribut in das Tag input.

Innerhalb des Attributs geben Sie die Anweisung event.charCode>=48 und event.charCode<=57 mit dem Operator && zurück, wie im folgenden Beispiel gezeigt. Schreiben Sie dann das Attribut required an das Ende des input-Tags.

Im Beispiel unten sind 48 und 57 die Unicode-Zeichencodes von 0 bzw. 9. Das JavaScript gibt nur den Wert von 0-9 zurück.

Auf diese Weise können wir das Ereignis onkeypress zusammen mit der Eigenschaft charCode verwenden, um nur numerische Eingaben in HTML zuzulassen.

Beispielcode:

<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>