Registrierungsformular, Telefonfeld, Katalogsuche: Der Nutzer klickt auf ein INPUT und tippt irgendetwas ein. Buchstaben, wo Sie Ziffern erwarten. Sonderzeichen in einer Bestellnummer. Emoji in einem E-Mail-Feld. Das Ergebnis: Datenmüll in der Datenbank, fehlerhafte Abfragen, Backend-Validierung scheitert mit einer Fehlermeldung.

Das Problem wird im Frontend mit 15 Codezeilen gelöst. Keine Plugins, keine Bibliotheken, nur reines JavaScript oder ein paar HTML-Attribute. Nachfolgend drei funktionierende Ansätze: vom schnellen HTML5 bis zur fein granulierten Filterung bei keydown, mit fertigen Beispielen für gängige Szenarien.

💡 Kurzüberblick:

• Wir untersuchen, wann die HTML-Attribute pattern, inputmode und type ausreichen und wann JavaScript nötig ist
• Wir schreiben einen „Nur-Ziffern"-Filter in jQuery und reinem JS, beide Varianten mit zeilenweiser Erläuterung
• Wir ergänzen einen Schutz gegen Einfügen via Strg+V und Kontextmenü
• Wir bauen eine universelle Vorlagenfunktion für beliebige Einschränkungen: Buchstaben, lateinische Zeichen, benutzerdefinierte Masken

HTML5: Was Sie ohne eine einzige Zeile JavaScript erreichen können

Der einfachste und zuverlässigste Weg, Eingaben einzuschränken, besteht darin, dem Browser genau mitzuteilen, was Sie in einem Feld erwarten. Moderne Browser verstehen drei Schlüsselattribute, die die meisten üblichen Aufgaben abdecken.

type, der primäre Filter. type="number" erlaubt nur Ziffern, Minus und Dezimaltrennzeichen. type="tel" zeigt auf Mobilgeräten eine numerische Tastatur. type="email" prüft beim Absenden des Formulars auf @. type="url" verlangt ein Protokoll. Das blockiert die Eingabe nicht vollständig, stellt aber die korrekte Bildschirmtastatur und eine Basisvalidierung beim Absenden bereit.

pattern, ein regulärer Ausdruck auf dem Feld. Das Attribut akzeptiert einen Regex und validiert den Wert beim Absenden des Formulars:

1
<input type="text" pattern="[0-9]{6}" placeholder="Six digits" title="Exactly 6 digits">

Der Browser blockiert das Absenden, wenn der Wert nicht dem Muster entspricht. Der Nachteil: pattern verhindert nicht die Eingabe unerlaubter Zeichen; es validiert nur das Ergebnis. Der Nutzer kann „abc" eintippen und sieht den Fehler erst beim Versuch, das Formular abzusenden.

inputmode, die korrekte Tastatur auf Mobilgeräten. inputmode="numeric" öffnet eine numerische Tastatur, verbietet aber nicht die Eingabe von Buchstaben. inputmode="decimal" fügt ein Trennzeichen hinzu. Nützlich in Kombination mit einem JavaScript-Filter: Die Tastatur ist bereits korrekt, und JS erledigt den Rest.

Was Sie wählen sollten. Wenn Sie die Eingabe unerlaubter Zeichen in Echtzeit tatsächlich unterbinden müssen, reichen HTML-Attribute nicht aus. Kommen wir zu JavaScript.

JavaScript: Tastenanschläge per keydown blockieren

Der keydown-Ansatz fängt jeden Tastenanschlag ab, bevor das Zeichen im Feld erscheint. Ist die Taste nicht auf der Whitelist, unterdrückt event.preventDefault() sie.

Option 1: jQuery, nur Ziffern

Der Code wird per ID an ein INPUT gebunden, erlaubt Ziffern und Servicetasten (Rücktaste, Pfeile, Tab) und blockiert alles andere:

1
$(document).ready(function() {
2
    $("#phone_input").keydown(function(event) {
3
        // Service keys — let them through
4
        if (event.keyCode === 46 || event.keyCode === 8 ||
5
            event.keyCode === 9  || event.keyCode === 27 ||
6
            (event.keyCode === 65 && event.ctrlKey === true) ||
7
            (event.keyCode >= 35 && event.keyCode <= 39)) {
8
            return;
9
        }
10
        // Block everything except digits (main block and numpad)
11
        if ((event.keyCode &lt; 48 || event.keyCode &gt; 57) &&
12
            (event.keyCode &lt; 96 || event.keyCode &gt; 105)) {
13
            event.preventDefault();
14
        }
15
    });
16
});

Hier die zeilenweise Erklärung: keyCode 46 (Entf), 8 (Rücktaste), 9 (Tab), 27 (Escape), 65 + Ctrl (Alles auswählen), 35..39 (Pos1, Ende, Pfeile). Dann folgen der Hauptblock Ziffern 48..57 (0..9) und Nummernblock 96..105. Alles, was nicht in diese Bereiche fällt, erhält preventDefault.

Vollständige Key-Code-Tabelle bei Cambia Research.

Option 2: Reines JavaScript, nur Ziffern

Dasselbe ohne jQuery, unter Verwendung von onkeypress. Diese Version ist kompakter und zieht keine Bibliothek nach sich:

1
document.getElementById("phone_input").onkeypress = function(event) {
2
    event = event || window.event;
3
    if (event.charCode && (event.charCode < 48 || event.charCode > 57)) {
4
        return false;
5
    }
6
};

charCode prüft, ob das Ereignis ein druckbares Zeichen enthält; Servicetasten (Pfeile, Rücktaste) passieren automatisch, da ihr charCode gleich 0 ist. Ziffern: 48..57, alles andere gibt false zurück.

Wichtig: keyCode gilt als veraltet. In modernem Code ist es besser, event.key zu verwenden, das einen String mit dem Tastennamen zurückgibt und nicht vom Tastaturlayout abhängt:

1
element.addEventListener("keydown", function(event) {
2
    // Allow digits, Backspace, Delete, arrows, Tab
3
    const allowedKeys = [
4
        "Backspace", "Delete", "Tab", "Escape",
5
        "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
6
        "Home", "End"
7
    ];
8
    if (allowedKeys.includes(event.key)) return;
9
    // Ctrl+A / Ctrl+C / Ctrl+V
10
    if (event.ctrlKey) return;
11
    // Only digits
12
    if (!/^[0-9]$/.test(event.key)) {
13
        event.preventDefault();
14
    }
15
});

Der event.key-Ansatz liest sich klarer und erfordert kein Auswendiglernen numerischer Codes. Für die Unterstützung älterer Browser funktioniert die obige keyCode-Version jedoch weiterhin.

Einfügen blockieren: Strg+V und Kontextmenü abfangen

keydown fängt Tastenanschläge ab, aber der Nutzer kann Text per Strg+V oder Rechtsklick → „Einfügen" einfügen. Er hat „abc123" in ein Nur-Ziffern-Feld kopiert, und die Hälfte ist durchgekommen.

Die Lösung ist das input-Ereignis. Es feuert nach JEDER Änderung des Feldwerts: manuelle Eingabe, Einfügen, Autofill, Text-Drag-and-Drop. Wir filtern den endgültigen Wert mit einem regulären Ausdruck:

1
document.getElementById("digits_only").addEventListener("input", function(event) {
2
    this.value = this.value.replace(/[^0-9]/g, "");
3
});

Das ist alles. Eine Zeile, und keine einzige Nicht-Ziffer gelangt durch das Feld, unabhängig davon, wie sie dorthin gekommen ist. Für Buchstaben: replace(/[^a-zA-Zа-яА-ЯёЁ]/g, ""). Für lateinische Zeichen: replace(/[^a-zA-Z]/g, "").

Kombinierter Ansatz (die goldene Mitte). keydown liefert sofortiges Feedback (die Taste „lässt sich nicht drücken"), während input gegen Einfügen absichert. Verwenden Sie beide Handler:

1
const field = document.getElementById("digits_only");
2
 
3
field.addEventListener("keydown", function(event) {
4
    const allowed = ["Backspace", "Delete", "Tab", "Escape",
5
                     "ArrowLeft", "ArrowRight", "Home", "End"];
6
    if (allowed.includes(event.key)) return;
7
    if (event.ctrlKey) return;
8
    if (!/^[0-9]$/.test(event.key)) event.preventDefault();
9
});
10
 
11
field.addEventListener("input", function() {
12
    this.value = this.value.replace(/[^0-9]/g, "");
13
});

Der erste Handler schneidet unerlaubte Tastenanschläge sofort ab. Der zweite bereinigt Überbleibsel nach Einfügen und Autofill.

Fertige Vorlage für beliebige Einschränkungen

Erstellen wir eine Funktion, die ein INPUT und einen regulären Ausdruck für erlaubte Zeichen entgegennimmt. Sie funktioniert für Telefonnummern, Postleitzahlen, Logins, SKU-Suche:

1
function restrictInput(element, allowedPattern) {
2
    element.addEventListener("keydown", function(event) {
3
        const serviceKeys = [
4
            "Backspace", "Delete", "Tab", "Escape",
5
            "ArrowLeft", "ArrowRight", "Home", "End"
6
        ];
7
        if (serviceKeys.includes(event.key)) return;
8
        if (event.ctrlKey && ["a", "c", "v", "x", "z"].includes(event.key.toLowerCase())) return;
9
        if (!allowedPattern.test(event.key)) event.preventDefault();
10
    });
11
 
12
    element.addEventListener("input", function() {
13
        // Build a global pattern from the provided one and clean
14
        const globalPattern = new RegExp(
15
            allowedPattern.source.replace("^", "").replace("$", ""),
16
            "g"
17
        );
18
        // Remove everything that does NOT match the pattern
19
        const inverted = new RegExp(
20
            "[^" + allowedPattern.source.slice(1, -1) + "]", "g"
21
        );
22
        this.value = this.value.replace(inverted, "");
23
    });
24
}

Verwendung:

1
// Digits only
2
restrictInput(document.getElementById("phone"), /^[0-9]$/);
3
// Latin letters only without spaces
4
restrictInput(document.getElementById("login"), /^[a-zA-Z]$/);
5
// Letters and digits
6
restrictInput(document.getElementById("postal"), /^[a-zA-Z0-9]$/);

Die Funktion hängt nicht von jQuery ab, funktioniert in allen modernen Browsern und deckt drei Szenarien ab: manuelle Eingabe (keydown), Einfügen (input), Autofill (input).

Hinweis: keydown feuert auf virtuellen Tastaturen einiger Mobilgeräte nicht; dort bleibt input die einzige Absicherung. Deshalb sind zwei Handler zusammen keine Redundanz, sondern Notwendigkeit.

Das obige Video ist eine Aufschlüsselung der Formularvalidierung in reinem JavaScript von Web Dev Simplified. Es behandelt die eingebaute Constraint Validation API, benutzerdefinierte Fehlermeldungen und das Styling ungültiger Felder, eine hervorragende Ergänzung zu den hier beschriebenen Ansätzen.

⁉️🤔 Häufig gestellte Fragen

Warum nicht einfach type="number" verwenden?

type="number" erlaubt die Eingabe von e und E (Exponent), Plus, Minus und Punkt. All dies sind gültige Zeichen für Gleitkommazahlen und Exponentialschreibweise. Für ein Telefonfeld oder eine Postleitzahl sind sie unnötig. Zudem behandeln Browser nicht-numerische Eingaben unterschiedlich: Manche lassen sie stillschweigend durch, andere zeigen einen Fehler erst beim Absenden.

Kann man das Einfügen per Strg+V komplett blockieren?

Einfügen vollständig zu blockieren, ist schlechte Praxis. Es verschlechtert die Benutzererfahrung und schützt nicht vor anderen Einfügemethoden (Kontextmenü, Drag-and-Drop). Der korrekte Ansatz: Einfügen erlauben, aber das Ergebnis sofort per input-Handler bereinigen, wie im obigen Abschnitt gezeigt.

Was ist mit Browser-Autofill?

Autofill feuert vor keydown und input; der Browser fügt den Wert direkt ein. Der input-Handler fängt auch diesen Fall ab: Der Wert erscheint im Feld und wird dann sofort gefiltert. Falls Autofill stört (Einfügen von Buchstaben in ein Telefonfeld), fügen Sie dem INPUT das Attribut autocomplete="off" hinzu.

Funktioniert das auf Mobilgeräten?

Ja, aber mit einer Einschränkung: Virtuelle Tastaturen erzeugen nicht immer keydown mit erwartetem keyCode und key. Der input-Handler funktioniert überall zuverlässig. Setzen Sie auf Mobilgeräten inputmode="numeric" oder inputmode="decimal" auf dem INPUT; der Nutzer erhält die korrekte Tastatur, selbst wenn der keydown-Filter nicht feuert.

Wie unterbindet man Leerzeichen?

Fügen Sie das Leerzeichen zur Klasse der unerlaubten Zeichen hinzu: replace(/[^0-9a-zA-Z]/g, "") entfernt alles außer Ziffern und lateinischen Buchstaben, einschließlich Leerzeichen. Oder explizit: this.value = this.value.replace(/\s/g, "") entfernt alle Leerzeichen, Tabulatoren und Zeilenumbrüche.

Welchen Ansatz Sie für Ihre Aufgabe wählen sollten

Wenn das Formular einfach ist und ein paar falsche Zeichen keinen kritischen Schaden verursachen, nutzen Sie HTML5: type, pattern und inputmode decken grundlegende Szenarien ohne eine einzige Zeile JS ab. Schnell, nativ, keine Abhängigkeiten.

Wenn Echtzeitkontrolle und sofortige Reaktion auf jeden Tastenanschlag wichtig sind, verwenden Sie die Kombination keydown + input. Der erste blockiert Tastenanschläge, der zweite bereinigt die Folgen des Einfügens. Die universelle Vorlagenfunktion aus dem obigen Abschnitt passt sich in einer Minute an jedes Feld an.

Die Hauptregel: Blockieren Sie Einfügen nicht vollständig. Es verärgert Nutzer und bietet keinen echten Schutz. Bereinigen Sie das Ergebnis nach dem Einfügen, anstatt es zu verbieten.