HTML Input Maske?
Hallo,
gibt es eine Möglichkeit, wenn es geht kurzzeilig, ein Eingabefeld im HTML Code nach einem bestimmten Schema zu formatieren? Es gibt die Möglichkeit, das weiß ich, aber was ich bis jetzt durch meine Recherche gefunden habe war nicht verständlich oder einfach formuliert.
Mein Anwendungsbeispiel wäre etwa eine IBAN einzugeben und diese dann mit einem DE vorne dran, dann zwei Zahlen und danach immer 4er Päckchen.
Der Code sollte am besten auch auf andere Möglichkeiten angepasst werden können. Zum Beispiel Datum wie folgt: __ /__ /____
Oder einfach nur eine Zahl nach tausender zu teilen, so zum Beispiel: 28 000 000 000
Kennt jemand so eine Lösung? Ist das dann direkt in HTML, in CSS oder in JavaScript? Oder gibt es auch was in jQuery oder Bootstrap?
Danke im Voraus
3 Antworten
a) Bau dir so ein Modul mit HTML und CSS aus mehreren Eingabefeldern zusammen.
b) Nutze eine Bibliothek wie jQuery Mask oder Inputmask. Wenn du nur via Google etwas suchst, findest du unter dem Stichwort html input mask noch etliche andere Lösungsoptionen.
Achte darauf, eine Lösung zu nutzen, die auch im Falle, dass JavaScript deaktiviert ist, funktioniert. Zudem solltest du bedenken, dass Lösungen, bei denen z.B. automatisch Inhalte in Eingabefeldern ergänzt werden, meist nicht barrierefrei umgesetzt sind und somit Nutzergruppen vor Probleme stellen könnte.
Das geht mit dem pattern-Attribut. Hier ein Beispiel für IBAN:
https://gist.github.com/Q4U/8578496
Beachte welche Browser das unterstützen:
https://caniuse.com/#feat=input-pattern
Also ich hab einfach das Input in meinen Code eingegeben und auch im Browser getestet aber formatiert wird nichts. (Ja mein Browser wird unterstützt)
Der erste Link hat mich zu einem interaktiven Beispiel mit Code geführt...
Die sind aber alle nur mit Plugins möglich oder? So steht es doch dabei