Die Eingabemaskierung wird vielleicht unterschätzt oder nicht oft verwendet, aber sie ist in verschiedenen Situationen sehr nützlich, vor allem wenn es darum geht, Eingaben in einem festen Format anzugeben und zu akzeptieren – zum Beispiel die Formatierung für ein benutzerdefiniertes Datum, eine Zahl oder eine Telefonnummer.
Um Ihnen den Einstieg zu erleichtern, werden wir uns zwei verschiedene Szenarien ansehen.
Szenario 1: Maskierung der Eingaben:
Für das erste Szenario werden wir ein einfaches Kurztextelement verwenden. Fügen Sie also gleich eines zu Ihrem Formular hinzu, wenn Sie es nicht schon getan haben. Um die Option Eingabemaske anzuzeigen, können Sie die folgenden Schritte ausführen:
- Klicken Sie auf das Element Kurzer Text.
- Klicken Sie auf der rechten Seite des Elements auf die Eigenschaften (Zahnradsymbol).
- Gehen Sie auf die Registerkarte Optionen.
- Scrollen Sie nach unten und suchen Sie die Option Eingabemaske, aktivieren Sie sie.
Bei der Eingabemaskierung verwenden Sie nur drei HTML-Zeichen, die direkt unter dem Umschalter für die Eingabemaske erläutert werden.
@ = Masken Buchstaben
# = Masken Zahlen
* = Masken Buchstaben & Zahlen
Vereinfacht ausgedrückt gibt Ihnen die Eingabemaske mehr Kontrolle über die Eingaben und beschränkt Ihre Benutzer auf die maskierten Eingaben.
Das mag immer noch etwas verwirrend klingen, also lassen Sie uns dies anhand der folgenden Beispiele noch weiter aufschlüsseln.
Beispiel A:
In diesem Beispiel wollen Sie etwa Städte benennen, die mit „St“ (Saint) beginnen, wie „St. Augustine“, was wie folgt aussehen würde: „@@ @@@@@@@@@“.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel B:
Schauen wir uns dies einmal in einem anderen Fall an, in dem Sie vielleicht eine Reihe von Zahlen anzeigen möchten, die wie folgt aussehen würden: „# # # # #“.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel C:
Eine gute Verwendung für die Zahlenmaske wäre auch für erweiterte benutzerdefinierte Daten, bei denen Sie nicht die Standard-Datumsfelder wie „##/##/####“ verwenden möchten.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel D:
Beides ist gut und schön, aber was ist, wenn Sie mehr als das brauchen, aber nicht so viele Informationen benötigen, wie z. B. in einem Fall, in dem Sie nur die Straßenadresse des Geschäftssitzes einer Person benötigen.
In diesem speziellen Fall würden Sie die obigen Angaben kombinieren, indem Sie @ und # zusammen verwenden, und das könnte etwa so aussehen: „#### @@@@@@@@@ @@“.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel E:
Vergessen Sie auch nicht, dass Sie zusätzlich eine der beiden Optionen zulassen, aber dennoch kontrollieren und einschränken können, indem Sie die dritte Option mit einem * (Sternchen) versehen, was in etwa wie „*** ** **** ** ***“ aussehen würde.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel F:
Was aber, wenn keine der oben genannten Möglichkeiten für Ihre Situation gut genug ist? Was ist, wenn Sie in der Regierung, in der Rechtsabteilung oder sogar in einer Autoteilefirma arbeiten? Auch das können Sie tun, indem Sie Ihre Zeichen unterteilen und etwas Systematisches wie „#@-#**#-#@“ schaffen.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel G:
Bei einigen der oben genannten Beispiele handelt es sich um feste Eingabemasken. Wie wäre es also, wenn Sie Benutzern ermöglichen würden, Zeichen einzugeben, aber nicht alle erforderlich sind. Zum Beispiel eine Mitgliedsnummer, die mit einem oder zwei Zeichen endet. Sie können die Eingabemaskierung als „@@-#####-@[@]“ vornehmen. Wie Sie sehen können, verwenden wir eine eckige Klammer für das optionale Zeichen.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Lassen Sie uns nun einen anderen Ansatz wählen, indem wir das zweite Szenario für ein Telefonfeld verwenden.
Szenario Nr. 2: Maskierung der Eingabe:
Sicher, die Maskierungsfunktion ist praktisch, aber was ist, wenn Sie ein Telefonbuchanbieter sind, der nach 1-800-Nummern sucht, oder wenn Sie Benutzer mit ausländischen Telefonnummern haben?
In solchen Fällen wäre eine Eingabemaskierung für ein Telefonfeld ebenso nützlich, um Ihnen die Kontrolle darüber zu geben, wie Ihre Telefonnummern eingegeben und verwendet werden.
Beispiel A:
Für das erste Beispiel fangen wir wieder an, fügen aber diesmal ein Telefonfeld hinzu. Sie sollten auf die Option Eingabemaske auf dieselbe Weise zugreifen können, wie wir es zuvor in diesem Leitfaden beschrieben haben.
Sie werden feststellen, dass Sie dieses Mal nur eine Nummernmaskierung mit # verwenden können, und Sie werden auch sehen, dass sich die Standardeingabe der Telefonnummer von zwei Eingaben zu einer Eingabe ändert, die zusätzlich mit „(###) ###-####“ vorausgefüllt ist.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel B:
Wenn Sie dies für 1-800-Nummern mit einer Telefonnummer verwenden möchten, könnten Sie etwas wie „+49-(8##)-###-####“ eingeben, damit Ihre Benutzer wissen, dass diese Art von Information benötigt wird.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Beispiel C:
Ein weiteres Beispiel: Sie wollen ein Programm für aufsuchende Anrufe in Australien durchführen. Dann müssten Sie Telefonnummern sammeln, die auf diese Formatierung beschränkt sind. In diesem Fall würde es etwa so aussehen: „+(##)#########“, aber Sie können es auch für jedes andere Land formatieren.
Das Backend Ihres Formulars:
Frontend Ihres Formulars:
Wir hoffen, dass dies zur Klärung der Verwendung der Eingabemaskierung beiträgt.
Spielen Sie ruhig mit dieser Option herum. Wenn Sie Vorschläge, Bedenken oder Fragen haben, können Sie unten einen Kommentar abgeben oder eine Frage in unserem Support Portal stellen.
Kommentar abschicken: