Nutzer geben Telefonnummern auf die unterschiedlichste Weise ein: manche beginnen mit 8, manche mit +7, manche tippen Ziffern ohne Leerzeichen, andere setzen nach jedem Ziffernpaar ein Leerzeichen. In der Datenbank landet ein Durcheinander. Manager verschwenden Zeit mit Anrufen, und die Hälfte der Nummern erweist sich als unbrauchbar. Ein vertrautes Szenario für jeden, der jemals ein Kontaktformular in eine Website eingebaut hat.

Eine Eingabemaske löst dieses Problem vollständig: Der Nutzer kann die Nummer physisch gar nicht im falschen Format eingeben. Er tippt Ziffern, und diese erscheinen automatisch an den richtigen Stellen, während Klammern und Bindestriche von selbst auftauchen. Keine Fehler, kein Frust.

Nachfolgend vier Wege, um eine Telefonmaske in ein Eingabefeld einzubauen: von nativem HTML5 ohne JavaScript bis hin zu einer voll ausgestatteten Bibliothek mit Länderflaggen. Mit Code, den Sie kopieren und in Ihr Projekt einfügen können.

💡 Kurzüberblick:

• Die einfachste Maske nutzt das pattern-Attribut und type="tel", ganz ohne JavaScript, funktioniert in jedem Browser
• Benötigen Sie Länderflaggen und internationale Formatierung, verwenden Sie intl-tel-input, die beliebteste Lösung auf GitHub
• Benötigen Sie eine Bibliothek für Telefon, Datum, Karten und beliebige andere Masken, greifen Sie zu IMask.js
• Möchten Sie eine Maske von Hand schreiben, ohne Abhängigkeiten einzubinden, erledigt das reines JavaScript in 30 Zeilen

Was eine Eingabemaske ist und warum sie wichtiger ist als Validierung

Eine Eingabemaske ist eine Vorlagenzeichenkette, die steuert, was der Nutzer sieht und in ein Formularfeld eingeben kann. Anders als die Validierung, die Daten nach dem Absenden prüft und einen Fehler anzeigt, arbeitet eine Maske in Echtzeit während der Eingabe: Sie verhindert, dass ein Buchstabe dort getippt wird, wo eine Ziffer hingehört, und fügt automatisch Klammern, Bindestriche und Leerzeichen ein.

Der Unterschied ist grundlegend. Validierung sagt: „Sie haben einen Fehler gemacht", und der Nutzer ist bereits frustriert und springt womöglich ab. Eine Maske führt ihn Schritt für Schritt: Fehler sind schlicht unmöglich. Für Telefonnummern ist das entscheidend, denn es gibt Dutzende Formatierungsvarianten. Allein eine russische Nummer kann als +7 999 123-45-67, als 8(999)1234567 oder als +7(999)123-45-67 geschrieben werden, und das sind nur drei von vielen Varianten. Ohne Maske erfindet jeder Nutzer sein eigenes Format, und die Datenbank wird zur Müllhalde.

Methode 1: HTML5, type="tel" und pattern

Der einfachste Weg: Lassen Sie JavaScript komplett weg. Moderne Browser unterstützen type="tel" und das pattern-Attribut, das die Eingabe beim Absenden des Formulars gegen einen regulären Ausdruck prüft.

Fügen Sie das Feld in Ihr Markup ein. Der Code lässt sich in jede HTML-Vorlage einbauen: Contact Form 7, ein natives WordPress-Formular oder eigenes Markup.

1
<input
2
  type="tel"
3
  id="phone"
4
  name="phone"
5
  pattern="\+7\s?[\(]?\d{3}[\)]?\s?\d{3}[\-]?\d{2}[\-]?\d{2}"
6
  placeholder="+7 (999) 123-45-67"
7
  title="Enter the number in the format +7 (999) 123-45-67"
8
  required
9
>

Sehen wir uns an, was hier passiert. type="tel" blendet auf Mobilgeräten eine Zifferntastatur statt der normalen Tastatur ein und macht die Telefoneingabe komfortabler. pattern definiert einen regulären Ausdruck, der mehrere Varianten zulässt: mit oder ohne Leerzeichen, mit oder ohne Klammern um die Vorwahl. title zeigt einen Tooltip beim Überfahren mit der Maus, und required verhindert das Absenden des Formulars mit leerem Feld.

Der Vorteil: null Abhängigkeiten, funktioniert in jedem Browser. Für eine einfache Landingpage reicht das aus.

Aber das ist keine echte Maske. Klammern und Bindestriche erscheinen nicht automatisch; der Nutzer muss sie manuell eingeben. pattern greift erst beim Absenden des Formulars. Wenn Sie eine Formatierung in Echtzeit während der Eingabe benötigen, wechseln Sie zu den nächsten Methoden.

Methode 2: intl-tel-input, internationales Format mit Länderflaggen

intl-tel-input ist die beliebteste JavaScript-Bibliothek für Telefoneingaben. Sie bietet ein Feld mit einer Dropdown-Liste von Länderflaggen, automatische Formatierung gemäß der nationalen Vorlage und Nummernvalidierung. Stand Juni 2026 hat die Bibliothek über 7.800 Sterne auf GitHub, und die aktuelle Version ist 29.

Installieren Sie die Bibliothek via npm (npm i intl-tel-input) oder CDN. Der folgende Code ist für Vanilla-JavaScript; es gibt auch fertige Komponenten für React, Vue, Angular und Svelte.

1
<!-- In the <head> of the page -->
2
<link
3
  rel="stylesheet"
4
  href="https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/css/intlTelInput.css"
5
>
6
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/js/intlTelInput.min.js"></script>

Das Eingabeelement und die Initialisierung kommen in die Vorlage, wo Sie das Feld benötigen. Für ein WordPress-Theme binden Sie das Skript via wp_enqueue_script in der functions.php ein und platzieren das Markup im entsprechenden Template.

1
<input type="tel" id="phone">
2
 
3
<script>
4
  const input = document.querySelector("#phone");
5
  const iti = intlTelInput(input, {
6
    initialCountry: "ru",
7
    separateDialCode: true,
8
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/js/utils.js"
9
  });
10
</script>

initialCountry: "ru" setzt standardmäßig die russische Flagge. separateDialCode: true verschiebt die Landesvorwahl aus dem Eingabefeld heraus: Wenn der Nutzer die Flagge wechselt, wird der Code automatisch eingefügt. utilsScript lädt Formatierungs-Hilfsprogramme; ohne sie funktioniert die Bibliothek zwar, aber die Nummern werden nicht gemäß dem Muster des gewählten Landes formatiert.

Das von intlTelInput() zurückgegebene Objekt stellt mehrere nützliche Methoden bereit. iti.getNumber() liefert die Nummer im internationalen E.164-Format, iti.isValidNumber() prüft die Gültigkeit, und iti.setNumber("9991234567") setzt den Wert programmatisch. Für Contact Form 7 benötigen Sie ein eigenes Skript: Suchen Sie das .wpcf7-tel-Feld und binden Sie intlTelInput daran.

Vorteil: eine vollständige internationale Lösung mit automatischer Formatierung, Flaggen, Validierung und Framework-Integrationen. Nachteil: Die Bibliothek wiegt rund 40 KB (gzip), was für eine einfache Landingpage mit einem einzigen Feld überdimensioniert ist.

Methode 3: IMask.js, eine universelle Maske ohne jQuery

IMask.js ist eine ausgereifte Maskierungsbibliothek, geschrieben in reinem JavaScript: kein jQuery, keine sonstigen Abhängigkeiten. Sie unterstützt Masken für Telefon, Datum, Zahlen, Währungen und dynamische Vorlagen. Sie ist dann nützlich, wenn Sie auf einer Website unterschiedliche Maskentypen benötigen: eine Telefonnummer im Kontaktformular, ein Datum in einem Kalender und einen Betrag in einem Rechner. Die aktuelle Version ist 7.1.

Installation via npm (npm i imask) oder Einbindung per CDN:

1
<script src="https://unpkg.com/imask"></script>

Eine Telefonmaske in drei Zeilen. Der Code kann in einem <script>-Tag im Footer oder in einer separaten JS-Datei in Ihrem Theme stehen.

1
const phoneInput = document.getElementById('phone');
2
const maskOptions = {
3
  mask: '+{7} (000) 000-00-00'
4
};
5
IMask(phoneInput, maskOptions);

Maskensyntax: +{7} ist ein festes Präfix, das der Nutzer nicht bearbeiten kann. 0 steht für eine beliebige Ziffer von 0 bis 9. Sie können Komplexität hinzufügen: die Vorwahl optional machen oder die Maske bei einem Länderwechsel dynamisch umschalten, indem Sie den dispatch-Parameter nutzen.

IMask gibt ein Objekt mit Zugriff auf den Rohwert zurück: maskRef.unmaskedValue liefert Ihnen die reinen Ziffern 79991234567, genau das, was Sie in der Datenbank speichern möchten. Die Methode maskRef.value gibt die formatierte Zeichenkette für die Anzeige zurück. Das klassische Problem ist gelöst: Ziffern gehen ans Backend, während der Nutzer eine schön formatierte Nummer sieht.

Vorteil: eine Bibliothek für alle Fälle, Rohwerte standardmäßig, keine Abhängigkeiten. Nachteil: Für ein einzelnes Telefonfeld ist intl-tel-input mit Flaggen einfacher; IMask spielt seine Stärken auf Formularen mit drei bis fünf verschiedenen Feldtypen aus.

Methode 4: Reines JavaScript, eine handgemachte Maske

Wenn Sie für nur ein Feld keine Bibliothek einbinden möchten, schreiben Sie die Maske in reinem JavaScript. Der folgende Code behandelt jeden Tastenanschlag und fügt automatisch Klammern und Bindestriche ein, während Ziffern eingegeben werden.

Platzieren Sie das Skript in derselben Vorlage, in der sich das Eingabefeld befindet, oder binden Sie es als separate Datei ein. Für WordPress nutzen Sie wp_enqueue_script mit dem Flag true (im Footer).

1
document.getElementById('phone').addEventListener('input', function (e) {
2
  let value = e.target.value.replace(/\D/g, '');
3
 
4
  if (value.length > 11) {
5
    value = value.slice(0, 11);
6
  }
7
 
8
  let formatted = '+7 (';
9
  if (value.length > 1) formatted += value.slice(1, 4);
10
  if (value.length > 4) formatted += ') ' + value.slice(4, 7);
11
  if (value.length > 7) formatted += '-' + value.slice(7, 9);
12
  if (value.length > 9) formatted += '-' + value.slice(9, 11);
13
 
14
  e.target.value = formatted;
15
});

Das input-Ereignis feuert bei jeder Feldänderung: Einfügen aus der Zwischenablage, Autokorrektur, Löschen. Die erste Zeile replace(/\D/g, '') entfernt alles außer Ziffern: Buchstaben und Sonderzeichen verschwinden sofort. Dann kappt das Skript überzählige Ziffern (eine russische Nummer hat 11 Ziffern inklusive Landesvorwahl) und baut die formatierte Zeichenkette auf: Landesvorwahl +7, dreistellige Vorwahl in Klammern, drei Ziffern, zwei, zwei, getrennt durch Bindestriche.

Bevor Sie dies auf einer Live-Site einsetzen, fügen Sie zwei Verbesserungen hinzu. Erstens: Beim Löschen von Ziffern in der Mitte der Nummer kann der Cursor ans Ende des Feldes springen; sichern Sie die Cursorposition via selectionStart und stellen Sie sie nach der Formatierung wieder her. Zweitens: Für Nummern aus anderen Ländern (Belarus hat 12 Ziffern, Kasachstan 11 Ziffern mit einer anderen Vorwahl) wird die Logik komplexer, und an diesem Punkt ist intl-tel-input vollauf gerechtfertigt.

Vorteil: 30 Zeilen, volle Kontrolle, null Kilobyte Abhängigkeiten. Nachteil: Die Maske ist auf ein Format zugeschnitten; für Projekte mit mehreren Ländern bläht sich der Code auf.

⁉️🤔 Häufig gestellte Fragen

Warum ist eine Maske besser als einfache Validierung?

Validierung greift nach dem Absenden des Formulars: Der Nutzer sieht einen Fehler und muss zurückgehen, um ihn zu beheben. Eine Maske arbeitet während der Eingabe und macht ein ungültiges Format physisch unmöglich. Weniger Frust, weniger abgebrochene Formulare. Für Telefonnummern ist das entscheidend: Fehler in der Nummer gehören zu den häufigsten Gründen, warum Nutzer ein Formular abbrechen.

Wie speichere ich reine Ziffern ohne Klammern und Bindestriche in der Datenbank?

Alle Bibliotheken in diesem Artikel liefern Rohwerte: intl-tel-input hat eine getNumber()-Methode, die +79991234567 zurückgibt, IMask.js hat eine unmaskedValue-Eigenschaft, die 79991234567 zurückgibt. Bevor Sie Daten an den Server senden, greifen Sie den Rohwert ab und speichern ihn. Zeigen Sie die formatierte Zeichenkette nur im Interface an. Fügen Sie in WordPress-Formularen ein verstecktes Feld <input type="hidden" name="phone_raw"> hinzu und befüllen Sie es vor dem Absenden via JavaScript.

Funktioniert die Maske auf Mobilgeräten?

Ja, alle vier Methoden funktionieren korrekt unter iOS und Android. type="tel" blendet die Zifferntastatur ein, was komfortabel ist. Auf älteren Android-Versionen (unter Version 6) kann sich das input-Ereignis mit Autokorrektur anders verhalten; testen Sie auf echten Geräten. intl-tel-input und IMask.js sind von ihren Entwicklern auf mobilen Browsern getestet und verursachen keine Probleme.

Kann ich eine Maske mit Contact Form 7 verwenden?

CF7 generiert Felder mit der Klasse .wpcf7-tel. Schreiben Sie ein Skript, das dieses Feld per Selektor findet und intl-tel-input oder IMask daran bindet. Beim Absenden des Formulars entnimmt CF7 den Wert direkt aus dem Feld, daher muss die Bibliothek Zeit haben, ihn vorher zu formatieren. Wenn Sie Rohwerte verwenden, fangen Sie das wpcf7submit-Ereignis ab und ersetzen die Daten in einem versteckten Feld.

Was mache ich mit Nummern aus verschiedenen Ländern auf derselben Website?

Verwenden Sie intl-tel-input: Der Nutzer wählt eine Flagge, und die Maske wechselt automatisch zum Format des gewählten Landes. Für Geotargeting können Sie initialCountry: "auto" setzen, dann erkennt die Bibliothek das Land per IP über einen externen Dienst. Wenn es nur zwei oder drei Länder sind und Ihr Abhängigkeitsbudget minimal ist, schreiben Sie zwei Masken in reinem JavaScript und schalten Sie mit einem „Russland / Kasachstan"-Radio-Button über dem Feld zwischen ihnen um.

Welche Methode Sie für Ihre Aufgabe wählen sollten

Die Wahl läuft auf drei Fragen hinaus: Wie viele Felder hat die Website, benötigen Sie Länderflaggen, und wie kritisch ist die Bundle-Größe.

Ein einzelnes einfaches Formular auf einer Landingpage: Beginnen Sie mit HTML5 pattern. Schnell, kein JavaScript, und auf Mobilgeräten schaltet die Tastatur auf Ziffern um. Wenn die Website internationale Nummern akzeptiert, deckt intl-tel-input alles ab: Flaggen, automatische Formatierung, Validierung. Für einen Onlineshop oder SaaS ist das der Standard.

Mehrere verschiedene Masken auf der Website (Telefon, Datum, Betrag, Karte): IMask.js gibt Ihnen eine einheitliche API für alle Felder und benötigt kein jQuery. Sie bauen ein Pet Project und wollen volle Kontrolle: 30 Zeilen reines JavaScript bewältigen russische Nummern ohne eine einzige Abhängigkeit.

Testen Sie, wie die Maske auf einer Live-Site funktioniert: Geben Sie eine Nummer mit Buchstaben ein, fügen Sie aus der Zwischenablage ein, versuchen Sie, ein paar Ziffern in der Mitte zu löschen. Das Feld sollte sich in jedem Szenario vorhersehbar verhalten. Für welche Methode haben Sie sich in Ihrem Projekt entschieden? Teilen Sie es in den Kommentaren mit.