JavaScript und HTML-Eingabe-Feld: nur ganze Werte zulassen

Wie kann ich nur ganze Zahlen in einem HTML-Eingabefeld zulassen.

Folgende Situation: wir haben ein Eingabefeld in einem HTML-Formular. Hier wollen wir nur ganze Zahlen zulassen. Gibt der Benutzer andere Werte ein, wollen wir das Feld zurücksetzen und auch Komma-Werte wollen wir nicht erlauben:

Umsetzung mit Java-Script

Zuerst legen wir unser Eingabefeld an:

<input class="w3-input" type="number" id="myinput" value="0" onfocusout="checkNumber(this);">

Beim Verlassen des Eingabefeldes rufen wir die Funktion „checkNumber“ auf. In dieser wollen wir nun die Eingabe überprüfen und ggf. korrigieren. Dazu legen wir folgenden Java-Script-Code im Dokument an:

<script type="text/javascript">
    function checkNumber(element) {
        let value;
        value = parseInt(element.value);
        if(isNaN(value)) value = 0;
        element.value = value;
    }
</script>

Was passiert hier? Zuerst lesen wir das Eingabefeld aus und wandeln den Wert in einen Integer-Wert um. Klappt das nicht, setzen wir den Wert auf 0 und setzen den Wert wieder in das Formularfeld.

Hier geht es zum Online-Beispiel

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.