Eingabetextmaskierung ohne Plugin mit JavaScript
- Eingabemaskierung für Kreditkartennummern in JavaScript
- Postleitzahl-Eingabemaskierung in JavaScript
- Telefonnummer mit Eingabemaskierung in Klammern in JavaScript
- Passen Sie die Eingabemaskierung für verschiedene Felder in JavaScript an
Die JavaScript-Eingabemaske oder das maskierte Textfeld ist ein Steuerelement, das dem Benutzer eine einfache und zuverlässige Möglichkeit bietet, Eingaben basierend auf einer Standardmaske zu sammeln. So können Sie beispielsweise Telefonnummern, Datumswerte, Kreditkartennummern und andere Standardformatwerte erfassen.
Möglicherweise müssen Sie es den Benutzern ermöglichen, in bestimmten Szenarien nur die spezifischen Daten in einem bestimmten Format einzugeben. Beispielsweise befinden sich Postleitzahlen und Kreditkarteneinträge in einem bestimmten Muster, in dem Sie bestimmte Datenformate einschränken können.
Die Eingabemaskierungsbibliothek ermöglicht es dem Benutzer, ein Eingabefeld unter Verwendung eines bestimmten Dateneingabeformats zu maskieren.
Dieses JavaScript-Modul zum Maskieren von Eingabefeldern nimmt Leerzeichen, Bindestriche und andere Zeichen automatisch vor. Dadurch können sich die Benutzer ausschließlich auf die Eingabe von Zahlen oder Buchstaben konzentrieren.
Dies ist besonders vorteilhaft, wenn Dateneingabeoperatoren, die eine Webschnittstelle verwenden, viele Eingaben vornehmen müssen.
Anhand der unten aufgeführten Beispiele erfahren Sie, wie Sie diese Bibliothek auf Ihrer Webseite einrichten.
Eingabemaskierung für Kreditkartennummern in JavaScript
In diesem Beispiel wird ein allgemeines Format für die Kreditkarte angegeben. Der Benutzer kann versuchen, Zahlen und Buchstaben einzugeben, ohne die Leerzeichen einzugeben.
Sie werden sehen, dass die Leerzeichen automatisch hinzugefügt werden, wie im folgenden Screenshot gezeigt.
Sie können auf den Code für dieses Beispiel unten zugreifen.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnum" placeholder ="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 digits of credit card">
</li>
</ul>
<script src="js/maskinginput/maskinginput.js" data-autoinit="true"></script>
</body>
</html>
Postleitzahl-Eingabemaskierung in JavaScript
Die Postleitzahl ist eine Mischung aus alphanumerischen Zeichen, daher ist dies ein interessanter Fall für die Eingabemaskierung. Der Platzhalter zum Eingeben der Postleitzahl wird erstellt, damit ein Benutzer weiß, ob ein Zeichen oder eine Zahl erforderlich ist.
Siehe Screenshot unten.
Anstatt X im Platzhalter zu verwenden, haben Sie gesehen, dass A1B2C3 verwendet wurde, sodass Sie das erforderliche Format kennen. Sie müssen das Leerzeichen auch nicht eingeben; Geben Sie den Code weiterhin im richtigen Format ein.
Das Markup zum Erstellen des maskierten Postleitzahl-Eingabefelds ist unten angegeben.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="zipca">Enter zip code</label>
<input id="zipca" type="text" name="zipcode" placeholder="A1B2C3" pattern="\w\d\w\d\w\d" class="masked" datacharset="_X_ X_X" title="Enter zip code">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
Telefonnummer mit Eingabemaskierung in Klammern in JavaScript
In diesem Beispiel wird das Telefonfeld maskiert und das Skript verwaltet die Klammern. Dies wird im Screenshot unten gezeigt.
Der Code dafür ist unten angegeben.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
Passen Sie die Eingabemaskierung für verschiedene Felder in JavaScript an
Das Wichtigste, was in allen oben genannten Fällen zu beachten ist, ist die Musterdefinition. Beispielsweise wird im obigen Telefonbeispiel das folgende Muster in das Eingabefeld eingefügt.
pattern = '\(\d{3}\) \d{3}\-\d{4}'
Wenn Sie den Benutzern erlauben möchten, vier Ziffern in Klammern anstelle von 3 einzugeben, ändern Sie sie in 4. Um zu zeigen, wie die Eingabefelder angepasst werden können, fügen Sie auch einen weiteren Bindestrich hinzu. So sieht das Muster aus:
pattern = '\(\d{4}\) \d{3}\--\d{4}'
Der Benutzer muss außerdem wie folgt Änderungen am Platzhalter vornehmen.
placeholder = '(XXXX) XXX--XXXX'
Der Screenshot dazu ist unten angegeben.
Der Code dafür ist unten angegeben.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXXX) XXX--XXXX" pattern="\(\d{4}\) \d{3}\--\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
Ebenso kann der Benutzer die Änderungen auch vornehmen, indem er die Zahlen oder Zeichen im erforderlichen Format hinzufügt.