MaskedTextField

Die MaskedTextField-Komponente bietet ein konfigurierbares Texteingabefeld, das Formatierungsregeln und Validierungen durchsetzt. Sie eignet sich gut für Anwendungen, die strukturierte Eingaben erfordern, wie z. B. Finanz-, E-Commerce- und Gesundheitssysteme.

Grundlagen

Die MaskedTextField kann mit oder ohne Parameter instanziiert werden. Sie können einen Anfangswert, ein Label, einen Platzhaltertext und einen Listener definieren, falls sich der Wert ändert.

MaskedTextField field = new MaskedTextField("Kontonummer");
field.setMask("ZZZZ-0000")
  .setHelperText("Maske: ZZZZ-0000 - zum Beispiel: SAVE-2025")

Maskenregeln

Die MaskedTextField formatiert die Texteingabe mithilfe einer Maske - einem String, der definiert, welche Zeichen an jeder Position erlaubt sind. Dies sorgt für konsistente, strukturierte Eingaben für Dinge wie Telefonnummern, Postleitzahlen und ID-Formate.

Unterstützte Maskenzeichen

Zeichen	Beschreibung
`X`	Jedes druckbare Zeichen
`a`	Jedes alphabetische Zeichen (Groß- oder Kleinbuchstaben)
`A`	Jedes alphabetische Zeichen; Kleinbuchstaben werden in Großbuchstaben umgewandelt
`0`	Jede Ziffer (0–9)
`z`	Jede Ziffer oder Buchstabe (Groß- oder Kleinbuchstaben)
`Z`	Jede Ziffer oder Buchstabe; Kleinbuchstaben werden in Großbuchstaben umgewandelt

Alle anderen Zeichen in der Maske werden als Literale behandelt und müssen genau eingegeben werden. Zum Beispiel erfordert eine Maske wie XX@XX, dass der Benutzer ein @ in die Mitte eingibt.

Ungültige Zeichen werden stillschweigend ignoriert.
Kurze Eingaben werden mit Leerzeichen aufgefüllt.
Lange Eingaben werden abgeschnitten, um in die Maske zu passen.

Beispiele

field.setMask("(000) 000-0000");     // Beispiel: (123) 456-7890
field.setMask("A00 000");            // Beispiel: A1B 2C3 (kanadische Postleitzahl)
field.setMask("ZZZZ-0000");          // Beispiel: ABCD-1234
field.setMask("0000-0000-0000-0000");// Beispiel: 1234-5678-9012-3456

Vollständige Eingabe erlaubt

Wenn die Maske nur X enthält, verhält sich das Feld wie ein standardmäßiges TextField und erlaubt jede druckbare Eingabe. Dies ist nützlich, wenn Sie die Möglichkeit reservieren möchten, das Format zu ändern, ohne strenge Zeichenregeln anzuwenden.

Code anzeigen

Java

Validierungsmuster

Während die Masken die Struktur der Eingabe definieren, können Sie sie mit Validierungsmustern kombinieren, um spezifischere Eingaberegeln durchzusetzen. Dies fügt eine zusätzliche Ebene der Validierung auf der Client-Seite unter Verwendung von regulären Ausdrücken hinzu.

Verwenden Sie die Methode setPattern(), um einen benutzerdefinierten regulären Ausdruck anzuwenden:

field.setPattern("[A-Za-z0-9]{10}"); // Erzwingt einen 10-stelligen alphanumerischen Code

Damit wird sichergestellt, dass die Eingabe nicht nur mit der Maske übereinstimmt, sondern auch einer definierten Struktur, wie Länge oder erlaubten Zeichen, entspricht.

Dies ist besonders nützlich, wenn:

Die Maske zu viel Flexibilität erlaubt
Sie eine genaue Länge oder ein bestimmtes Format (z. B. Hex, Base64, UUID) durchsetzen möchten

Format des regulären Ausdrucks

Das Muster muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er vom Typ RegExp verwendet wird. Weitere Einzelheiten finden Sie in der HTML-Musterattribut-Dokumentation.

Wiederherstellung des Wertes

Die MaskedTextField enthält eine Wiederherstellungsfunktion, die den Wert des Feldes auf einen vordefinierten oder ursprünglichen Zustand zurücksetzt. Dies kann nützlich sein, um Benutzeränderungen rückgängig zu machen oder zu einer Standard-Eingabe zurückzukehren.

field.setRestoreValue("ABC123");
field.restoreValue();

Möglichkeiten zur Wiederherstellung des Wertes

Programmgesteuert, durch Aufrufen von restoreValue()
Über die Tastatur, durch Drücken von ESC (dies ist die Standard-Wiederherstelltaste, es sei denn, sie wird von einem Ereignislistener überschrieben)

Sie können den Wert, der wiederhergestellt werden soll, mit setRestoreValue() festlegen. Wenn kein Wiederherstellungswert festgelegt ist, wird das Feld auf den Anfangswert zurückgesetzt, der zum Zeitpunkt der Renderung vorhanden war.

Code anzeigen

Java