Input Mask: Was es ist, Eingabemasken und Formatierung

Was ist eine Eingabemaske?

Input Mask (Eingabemaske) ist ein Mechanismus, der eine Vorlage für eingegebene Daten definiert und den Text während der Eingabe automatisch formatiert. Der Benutzer gibt nur signifikante Zeichen (Ziffern, Buchstaben) ein, und das System fügt automatisch Trennzeichen hinzu: Leerzeichen, Bindestriche, Klammern, Schrägstriche. Dies ist der Hauptunterschied zur Nachbearbeitung, bei der Daten nach Abschluss der Eingabe formatiert werden.

Eingabemasken lösen drei Probleme der Benutzererfahrung. Erstens die kognitive Belastung: Der Benutzer muss sich das Datenformat nicht merken und Trennzeichen manuell setzen. Zweitens die Eingabegeschwindigkeit: Das automatische Einfügen von Trennzeichen und der Übergang zur nächsten Zeichengruppe beschleunigen das Tippen. Drittens die Datenqualität: Die Maske garantiert, dass Daten in einem einheitlichen Format ohne Variationen gesammelt werden.

Im Gegensatz zu NSFormatter-Formatierern, die auf der Anzeigeebene bereits eingegebener Daten arbeiten, arbeitet eine Eingabemaske auf der Eingabeebene: Sie steuert jedes eingegebene Zeichen und bestimmt, ob es an der aktuellen Maskenposition zulässig ist. Wenn ein Zeichen nicht mit der Maske übereinstimmt, wird es abgelehnt oder ignoriert.

Laut Apple-UX-Forschung (2024) sind Eingabemasken am effektivsten für Felder, in denen der Benutzer Daten in einem unbekannten Format eingibt. Zum Beispiel SNILS (000-000-000 00) oder INN (000000000000) — der Benutzer kennt möglicherweise nicht die genaue Anzahl der Ziffern oder die Platzierung der Trennzeichen, und die Maske zeigt visuell das richtige Format an.

Syntax der Eingabemaske

Die Maskensyntax in der InputMask-Bibliothek verwendet eine Kombination aus Platzhalterzeichen und konstanten Zeichen. Platzhalter definieren den Typ des zulässigen Zeichens an jeder Position: 0 oder 9 für Ziffern, A für Buchstaben, _ für beliebige Zeichen. Konstante Zeichen sind Trennzeichen, die automatisch eingefügt werden: Leerzeichen, Bindestriche, Klammern, Punkte, Schrägstriche.

Erforderliche und optionale Blöcke

Eckige Klammern [0] kennzeichnen ein erforderliches Zeichen — der Benutzer muss an dieser Position eine Ziffer eingeben. Geschweifte Klammern {0} kennzeichnen ein optionales Zeichen — wenn der Benutzer den Block überspringt, fügt die Maske die entsprechenden Trennzeichen nicht ein. Zum Beispiel die Maske [00]{.}[00]{.}[0000] für ein Datum: Wenn der Benutzer den Monat nicht eingibt, wird das Trennzeichen nach dem Tag ebenfalls nicht angezeigt.

Maskenaffix

Konstante Zeichen außerhalb von eckigen und geschweiften Klammern sind das Affix — sie werden immer angezeigt, auch wenn das Feld leer ist. Zum Beispiel in der Maske +7 ([000]) [000]-[00]-[00] sind die Zeichen +7, (, ), Leerzeichen und Bindestrich das Affix und können vom Benutzer nicht gelöscht werden. Das Affix hilft dem Benutzer, das erwartete Format bereits vor der Eingabe zu verstehen.

Arten von Masken nach Verwendungszweck

Eingabemasken werden nach der Art der Daten klassifiziert, für die sie bestimmt sind. Jeder Typ hat seine eigene Struktur, Anzahl von Gruppen und Platzierung der Trennzeichen. Die richtige Wahl der Maske ist entscheidend für die Benutzererfahrung — wenn die Maske nicht den Erwartungen des Benutzers entspricht, wird er die automatisch eingefügten Zeichen löschen.

Masken für Telefonnummern

Telefonmasken sind der häufigste Typ. Eine russische Nummer wird als +7 ([000]) [000]-[00]-[00] formatiert, eine amerikanische als +1 ([000]) [000]-[0000]. Die Maske muss unterschiedliche Anzahlen von Ziffern in der Länder- und Stadtvorwahl unterstützen. Die InputMask-Bibliothek unterstützt Prioritätsmasken: Wenn die erste Maske nicht passt (der Benutzer hat eine andere Ländervorwahl eingegeben), wird die zweite angewendet.

Masken für Bankkarten

Für Kartennummern wird die Maske [0000] [0000] [0000] [0000] mit Leerzeichen zwischen Gruppen von 4 Ziffern verwendet. Zusätzlich kann eine Maske für das Ablaufdatum [00]/[00] und den CVV-Code [000] angewendet werden. Die Kartennummernmaske unterstützt je nach Zahlungssystem 16–19 Ziffern: Visa und Mastercard — 16 Ziffern, American Express — 15, Maestro — 12–19.

Masken für Daten und Codes

Datumsmasken verwenden das Format [00]{.}[00]{.}[0000] mit Punkt oder Schrägstrich als Trennzeichen. Für INN, SNILS und andere Identifikatoren werden spezialisierte Masken verwendet: INN — [000000000000] (12 Ziffern), SNILS — [000]-[000]-[000] [00] (11 Ziffern mit Bindestrichen). Für Bestätigungscodes — [0000] oder [000000] je nach Länge.

Implementierung einer Maske in Swift

Die Implementierung einer Maske in Swift erfolgt durch das Setzen eines UITextFieldDelegate mit der InputMask-Bibliothek. Die Bibliothek stellt die Klasse MaskedTextFieldDelegate bereit, die mit einem Textfeld verbunden wird und die Eingabe automatisch gemäß der angegebenen Maske formatiert.

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

Für Telefonnummern mit automatischer Ländererkennung verwenden Sie Prioritätsmasken. MaskedTextFieldDelegate unterstützt ein Array von Masken: Die erste passende Maske wird angewendet. Wenn der Benutzer die Vorwahl +1 eingibt, wird das amerikanische Format angewendet, bei +7 das russische Format.

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

Für Daten mit optionalen Blöcken verwenden Sie geschweifte Klammern. Wenn der Benutzer nur den Tag eingibt, zeigt die Maske „21“ an. Wenn der Benutzer Tag und Monat eingibt, zeigt sie „21.07“ an. Wenn alle drei Komponenten eingegeben werden, zeigt sie „21.07.2026“ an. Optionale Blöcke machen die Maske anpassungsfähig und zwingen den Benutzer nicht, Daten einzugeben, die er nicht bereitstellen möchte.

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

Behandlung von Einfügen und Löschen

Die korrekte Behandlung des Einfügens ist einer der anspruchsvollsten Aspekte bei der Implementierung einer Eingabemaske. Beim Einfügen von Text (z. B. einer Kartennummer aus der Zwischenablage) muss die Bibliothek alle Trennzeichen aus dem eingefügten Text entfernen, nur die signifikanten Zeichen extrahieren und die Maske auf die bereinigten Daten anwenden. InputMask von RedMadRobot erledigt dies automatisch über die Methode shouldChangeCharactersIn.

Beim Einfügen von formatiertem Text (mit Leerzeichen oder Bindestrichen) normalisiert die Bibliothek zunächst die Daten: Sie entfernt alle Zeichen, die nicht dem Maskenmuster entsprechen, und wendet dann die Maske auf die normalisierte Zeichenfolge an. Wenn der eingefügte Text ungültige Zeichen enthält (Buchstaben in einer Ziffernmaske), werden diese ignoriert.

Die Behandlung des Löschens (Rücktaste) in einer Maske erfordert besondere Aufmerksamkeit. Beim Drücken der Rücktaste muss die Maske das letzte signifikante Zeichen löschen, nicht das konstante Trennzeichen. Wenn sich der Cursor nach einem konstanten Zeichen befindet, sollte die Rücktaste dieses überspringen und das vorherige signifikante Zeichen löschen. InputMask implementiert dieses Verhalten über einen Stapel eingegebener Zeichen.

Für Textauswahl und -ersetzung muss die Maske Situationen korrekt behandeln, in denen der Benutzer einen Teil des Textes auswählt und durch neuen Inhalt ersetzt. Die InputMask-Bibliothek unterstützt dies über die Methode modifyString in MaskedTextFieldDelegate, die einen Ersetzungsbereich und eine neue Zeichenfolge akzeptiert.

Best Practices für das Design von Masken

Das Maskendesign beginnt mit der Analyse, wie der Benutzer Daten eingeben wird. Wenn die meisten Benutzer das Format auswendig kennen (Telefonnummer), sollte die Maske minimal sein — nur Trennzeichen zwischen Gruppen. Wenn das Format unbekannt ist (SNILS, INN), sollte die Maske informativer sein, mit einem Affix und Beschriftungen.

Vermeiden Sie übermäßige Masken mit einer großen Anzahl konstanter Zeichen. Die Maske +7 ([000]) [000]-[00]-[00] enthält 7 konstante Zeichen für 10 signifikante — dies ist akzeptabel. Aber eine Maske mit übermäßigen Trennzeichen, die der Benutzer ständig umgeht, schadet mehr als sie nützt. Wenn Sie sich über das Format nicht sicher sind, verwenden Sie freie Eingabe.

Für internationale Anwendungen beachten Sie, dass sich Datenformate zwischen Ländern unterscheiden können. Eine Telefonnummer in den USA hat das Format +1 (XXX) XXX-XXXX, während sie in Italien +39 XXX XXX XXXX ist. Verwenden Sie Prioritätsmasken mit automatischer Ländererkennung per Vorwahl, oder lassen Sie den Benutzer vor der Eingabe der Nummer ein Land auswählen.

Laut InputMask-UX-Tests bevorzugen Benutzer Masken, die das Format vor der Eingabe anzeigen (über Platzhalter oder Affix) und die Zeicheneingabe nicht blockieren. Eine Maske sollte ein Hinweis sein, keine Einschränkung. Wenn der Benutzer ein Zeichen eingibt, das nicht der Maske entspricht, ist es besser, dies zuzulassen, als die Eingabe ohne Erklärung zu blockieren.