Brad Frost schrieb über eine aktuelle Erfahrung mit einer Website, die <input type="number"> verwendete.
Letzte Woche erhielt ich einen Anruf von meiner Bank bezüglich einer gerade getätigten Überweisung. Der Kundendienstmitarbeiter ließ mich alles wiederholen, da es ein Problem mit den Informationen zu geben schien. „Hmmm, alles, was Sie gesagt haben, ist richtig, bis auf die letzten 3 Ziffern der Kontonummer.“
Er ließ mich das Überweisungsformular erneut einreichen. Als ich das Feld für die Kontonummer verließ, bemerkte ich im Augenwinkel, wie sich die Kontonummer ganz leicht veränderte. Ich konzentrierte mich schnell wieder auf das Feld und bewegte meinen Zeigefinger leicht nach oben auf meiner Magic Mouse. Es sah mehr nach einem Spielautomaten als nach einem Eingabefeld aus!
Brad argumentiert, dass wir dann <input type="number"> nicht für „Kontonummern, Sozialversicherungsnummern, Kreditkartennummern, Bestätigungsnummern“ verwenden sollten, was für mich Sinn ergibt! Stattdessen können wir das `pattern`-Attribut verwenden, das Chris Ferdinandi vor einiger Zeit in einem Beitrag über Constraint-Validierung in HTML betrachtete.
Es ist erwähnenswert, dass numerische Eingaben komplexer sein können, als sie erscheinen, und dass ihr Aussehen und Verhalten zwischen den Browsern variiert. Alles gute Dinge, die man neben Brads Rat bei der Bewertung des Benutzererlebnisses berücksichtigen sollte.
Auch
<input inputmode="numeric"> ist der Weg für mobile numerische Tastaturen (gepaart mit `pattern="[0-9]*"` auf iOS, bis zur Unterstützung von inputmode).
Hinweis: Nur positive ganze Zahlen! https://#/R9WuwXy106 https://#/2HiSq4ZXK0
— Zach Leatherman (@zachleat) 25. März 2019
use type=tel
Matt, das funktioniert tatsächlich nicht.
type=telerzwingt keine Eingabewerte, und eine Kontonummer ist keine Telefonnummer, daher ist sie semantisch nicht sinnvoll (wichtig unter dem Gesichtspunkt der Barrierefreiheit).Die im Tweet auf der Seite von Zach Leatherman gegebene Antwort ist korrekt und bietet das beste Benutzererlebnis. Auf Mobil- und Tablet-Geräten mit Bildschirmtastaturen wird dem Benutzer eine numerische Tastatur angezeigt. Auf denselben Geräten und Desktops stellt das
patternsicher, dass nur numerische Eingaben die Validierung bestehen.Kontonummern, Telefonnummern, Postleitzahlen und Ähnliches sind keine wirklichen Zahlen, sondern Zeichenketten aus Ziffern. sollte für tatsächliche Zahlen reserviert sein, d. h. für Dinge, mit denen man rechnen kann.
Für ein Datumsfeld (type text, da ich den nativen Datepicker nicht benötige) habe ich `inputmode` auf `numeric` gesetzt, was auf Android-Geräten perfekt funktioniert und mir die numerische Tastatur liefert, aber nicht dasselbe auf iOS, und ich suche immer noch nach einer Lösung dafür, wenn jemand eine Idee hat.
Danke
Ich verstehe es nicht, was ist mit dem Eingabefeld passiert???