PIN-Felder mit einzelnen Eingabefeldern

Es gibt immer wieder furchtbare Dinge im Webdesign. Einer davon sind diese PIN- oder Codefelder, bei denen man einzelne Textfelder nimmt.

HTML hat Eingabefelder, die sehen so aus:

Das ist ein einfaches Eingabefeld mit einfachem Code:

<input type="text" />

Das hat auch ganz tolle Funktionen, wie eine maximale Länge:

<input type="text" size="6" maxlength="6" />

Und das sieht dann so aus. Man kann dort sechs Stellen eingeben:

Das ganze funktioniert wunderbar. Man kann Dinge reinkopieren, man kann mit Backspace Zeichen löschen. Also eben das, was man von einem Textfeld erwartet.

Nun gibt es aber Webseiten, denen das zu langweilig ist. Man möchte einen sechsstelligen Passcode anfordern und setzt dann sechs einzelne Eingabefelder ein:

Das macht dann aber ganz viel kaputt. Möchte man einfügen, so wird nur in das erste Feld eingefügt. Das hat aber eine Maximallänge von 1. Tja, der Rest verfällt. Ich muss den bescheuerten Code aus meiner E-Mail also abtippen.

Wenn man etwas eintippt, dann wird der Cursor per JavaScript in das nächste Feld gebracht. Aber Backspace funktioniert nicht, das haben sie vergessen. Ich muss also mit der Maus klicken.

Man hat also Arbeit reingesteckt etwas zu machen, was schlechter ist als der Standard, den es seit Jahrzehnten gibt. Das ist wirklich modernes Webdesign und ich hasse so ziemlich alles daran.