Grundlagen der Eingabemaskierung

Eingabemaskierung wird möglicherweise unterschätzt oder nicht häufig verwendet. Dennoch ist sie in verschiedenen Situationen sehr nützlich, insbesondere wenn es darum geht, Eingaben in einem festen Format zu spezifizieren und zu akzeptieren – zum Beispiel bei der Formatierung eines benutzerdefinierten Datums, einer Zahl oder einer Telefonnummer.

Watch on youtube

Input masking in online forms

Um Ihnen den Einstieg zu erleichtern, betrachten wir zwei verschiedene Szenarien.

Input Masking Scenario #1:

Für das erste Szenario betrachten wir ein einfaches Kurztext-Element. Fügen Sie also jetzt eines zu Ihrem Formular hinzu, falls Sie dies noch nicht getan haben. Um die Option Eingabemaske anzuzeigen, können Sie die folgenden Schritte ausführen: 

1. Klicken Sie auf das Element Kurzer Text.
2. Klicken Sie auf der rechten Seite des Elements auf Eigenschaften (Zahnradsymbol).
3. Gehen Sie zum Optionen-Tab.
4. Scrollen Sie nach unten und finden Sie die Option Eingabemaske. Stellen Sie sicher, dass sie aktiviert ist. 

Bei der Eingabemaskierung verwenden Sie nur drei HTML-Zeichen, die direkt unter dem Umschalter für die Eingabemaske erklärt werden.

• @ — Maskiert Buchstaben
• # — Zahlen maskieren
• * — Maskiert Buchstaben & Zahlen

Um das oben Gesagte vereinfacht darzustellen: Die Eingabemaske bietet Ihnen deutlich mehr Kontrolle darüber, was eingegeben wird, indem Sie Ihre Nutzer auf die vorgegebenen Eingaben beschränkt.

Das mag immer noch verwirrend klingen, daher fassen wir es anhand der folgenden Beispiele zusammen.

Beispiel A:

Nehmen wir in diesem Beispiel an, Sie möchten Städte benennen, die mit St (Sankt) beginnen, wie zum Beispiel St. Augustin, das würde so aussehen: @@ @@@@@@@@@.

Das Backend Ihres Formulars:

Frontend Ihres Formulars:

Beispiel B:

Schauen wir uns nun ein weiteres Beispiel an, in dem Sie eine Reihe von Zahlen mit Abständen anzeigen möchten, die so aussehen: # # # # #.

Das Backend Ihres Formulars:

Front-end of your Form:

Beispiel C:

Eine sinnvolle Anwendung der Zahlenmaskierung wäre für erweiterte benutzerdefinierte Datumsangaben, bei denen Sie möglicherweise nicht die standardmäßigen Datumsfelder wie ##/##/#### verwenden möchten.

Das Backend Ihres Formulars:

Front-End Ihres Formulars:

Beispiel D:

Beide oben genannten Optionen sind gut, aber was ist, wenn Sie mehr benötigen, aber nicht so viele Informationen, zum Beispiel wenn Sie nur die Straßenadresse eines Geschäftsstandorts wissen möchten?

In diesem speziellen Fall möchten Sie die oben genannten Zeichen kombinieren, indem Sie sowohl @ als auch # zusammen verwenden. Das könnte dann etwa so aussehen: #### @@@@@@@@@ @@.

Das Backend Ihres Formulars:

Front-end of your Form:

Beispiel E:

Vergessen Sie auch nicht, dass Sie entweder diese Optionen erlauben können, aber dennoch mit der dritten Option unter Verwendung des * (Sternchens) kontrollieren und begrenzen können. Das würde dann ungefähr so aussehen: *** ** **** ** ***.

Das Backend Ihres Formulars:

Frontend Ihres Formulars:

Beispiel F:

Aber was, wenn keine der oben genannten Optionen für Ihre Situation geeignet ist? Was, wenn Sie für eine Regierungsbehörde, eine Anwaltskanzlei oder ein Unternehmen in der Autoersatzteilbranche arbeiten? Sie können das ebenfalls tun, indem Sie Ihre Zeichen in Segmente unterteilen, um etwas Systematisches zu erstellen, wie zum Beispiel #@-#**#-#@.

Das Backend Ihres Formulars:

Frontend Ihres Formulars:

Beispiel G:

Einige der obigen Beispiele sind feste Eingabemaskierung, aber was ist, wenn Sie möchten, dass Benutzer Zeichen eingeben können, ohne dass diese alle erforderlich sind? Zum Beispiel eine Mitgliedsnummer, die mit einem oder zwei Zeichen endet. Sie können die Eingabemaskierung als @@-#####-@[@] gestalten. Wie Sie sehen, verwenden wir eckige Klammern für das optionale Zeichen.

Das Backend Ihres Formulars:

Frontend Ihres Formulars:

Input Masking Scenario #2:

Sicher, die Verwendung der Maskierungsfunktion ist praktisch, aber was ist, wenn Sie ein Telefonverzeichnisanbieter sind, der nach 1-800-Nummern sucht, oder wenn Sie Benutzer mit ausländischen Telefonnummern haben?

In solchen Fällen ist die Eingabemaskierung bei einem Telefonfeld hilfreich, da sie Ihnen Kontrolle darüber gibt, wie Ihre Telefonnummern eingegeben und verwendet werden.

Beispiel A:

Für das erste Beispiel beginnen wir noch einmal von vorn, aber fügen diesmal ein Telefonfeld hinzu. Sie sollten die Option Eingabemaske auf die gleiche Weise wie zuvor in diesem Leitfaden beschrieben finden können.

Diesmal werden Sie feststellen, dass Sie nur eine Zahlenmaskierung mit # verwenden können. Außerdem ändert sich die Standardeingabe für Telefonnummern von zwei Feldern zu einem Feld, das zusätzlich mit (###) ###-#### vorab ausgefüllt ist.

Das Backend Ihres Formulars:

Frontend Ihres Formulars:

Beispiel B:

Wenn Sie dies nun für 1-800-Nummern mit einer Telefonnummer verwenden möchten, könnten Sie es so gestalten: 1-(8##)-###-####, um Ihren Nutzern zu zeigen, welche Art von Informationen benötigt werden.

Das Backend Ihres Formulars:

Frontend Ihres Formulars:

Beispiel C:

Nehmen wir ein weiteres Beispiel: Sie planen, ein Telefon-Outreach-Programm in Australien durchzuführen. Dazu müssten Sie Telefonnummern in einem bestimmten Format sammeln, das in etwa so aussehen würde: +(##)#########. Sie können das Format jedoch anpassen, um es an die Anforderungen anderer Länder anzupassen. 

Das Backend Ihres Formulars:

Front-End Ihres Formulars:

Das war’s im Wesentlichen zur Eingabemaskierung. Sie ist in vielen Fällen praktisch und kann in Ihrem Formular angewendet werden.