Eingabefelder automatisch mit Cleave.js formatieren
Denken Sie über all die verschiedenen Eingabefelder nach erfordern eine formatierte Struktur. Telefonnummern, Kreditkarten, Geburtsdaten, Straßenadressen ... alle haben ihre eigene einzigartige Muster.
Es ist leicht genug, diese Felder in Ruhe zu lassen und dem Benutzer zu vertrauen. Aber es könnte besser sein Cleave.js, ein kostenloses Vanille-JavaScript-Plugin dir zu helfen Eingabefelder werden automatisch formatiert.
HTML5 kommt mit eigener Satz von Eingaben in Bezug auf Datenmuster wie Telefonnummern. Mit Cleave können Sie dies mit auf die nächste Ebene bringen kundenspezifische Eingaben Das Text automatisch formatieren wie es geschrieben ist.
Standardmäßig wird das Plugin unterstützt fünf grundlegende Textmuster:
- Kreditkartennummern
- Telefonnummern
- Termine
- Numerisches Styling (mit Kommas)
- Benutzerdefinierte Eingabefelder
Die letzte Wahl ist die coolste, weil Sie Ihre Wahl treffen können eigene benutzerdefinierte Datenmuster von Grund auf. Cleave zwingt Sie nicht zu strengen Methoden.
Stattdessen gibt es Ihnen die Werkzeuge dazu Bauen Sie Ihre eigenen Eingaben mit Optionale Unterstützung für React- und Angular-Komponenten. Es unterstützt auch alle gängigen Browser und sollte die Unterstützung für ältere Browser zusammen mit jQuery.
Beachten Sie, dass dies kein schwieriges Plugin ist. Sie ziele auf jede ID oder Klasse, die du hast in Ihrem Eingabefeld und übergeben Sie das in eine neue Cleave-Instanz. Hier ist ein Beispielausschnitt:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); Obwohl Cleave einfach einzurichten ist, hat es dies getan viele benutzerdefinierte Funktionen du kannst mit spielen.
Die gesamte Dokumentation ist im Repo gehostet, Sie müssen also die GitHub-Seite durchsuchen Finden Sie alle verschiedenen Methoden und Optionen. Insbesondere die Optionsseite hat viel zu tun und kann eine Weile dauern, um zu finden, was Sie wollen.
Zum Glück hat Cleave viele Live-Beispiele Sie können studieren und replizieren. Diese Beispiele sind auch kostenlos zum Download aus dem GitHub Repo. Wenn du sehen willst Weitere Live-Beispiele Besuche den Cleave.js-Startseite oder check out diese Geige vollgepackt mit Demos.
