Benutzer-Werkzeuge

Webseiten-Werkzeuge


js:only_digits

JavaScript: Nur Ziffern im Eingabefeld zulassen

Laut HTML-Definition kann ein Eingabefeld, welches ausschließlich für die Eingabe von Zahlen vorgesehen ist mit dem Input Type „number“ angegeben werden. Die Browser verhalten sich allerdings beim input type=“number“ sehr unterschiedlich. Der Google Chrome z. B. lässt trotzdem den Buchstaben „e“ und „E“ zu und es kann keine maximale Zeichenlänge (wie z. B. max. 5 Ziffern für eine Postleitzahl) festgelegt werden.

Um einheitlich für alle Browser eine Einschränkung auf Ziffern vorzugeben kann folgendes JavaScript verwendet werden:

<script lang="js">
function validateDigits( event )
{
    return event.charCode >= 48 && event.charCode <= 57;
}
</script>

Diese Funktion verhindert, dass Zeichen außerhalb vom charCode von 0-9 eingegeben werden, in dem als Rückgabewert FALSE zurückgegeben wird.

numerisches Zeichen charCode (Zeichencode)
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57

Die Funktion muss jetzt bei einem Texteingabefeld bei jeder Zeicheneingabe aufgerufen werden:

<html lang="de">
    <input type="text" id="zahl" onkeypress="return validateDigits( event )" maxlength="5" />
</html>

Tipp: Mit dieser Funktion können natürlich auch weitere Zeichen zugelassen oder ausgeschlossen werden. Hierfür einfach die Funktion entsprechend anpassen. Um herauszufinden, welches Zeichen welchen charCode hat kann die Funktion wie folgt angepasst werden:

    function validateDigits( event )
    {
        document.getElementById( 'zahl').value = event.charCode;
        return false;
    }
js/only_digits.txt · Zuletzt geändert: 2019/09/14 17:46 von webproducer