Was ist der richtige Eingabe-Typ für Kreditkartennummern?

8

TLDR: Welcher Eingabetyp kann die mobilen numerischen Tastaturen verwenden UND Maskierung mit injizierten Leerzeichen und ein maximales Limit für CVV- und Kreditkarteneingaben, wie zum Beispiel: XXXX XXXX XXXX XXXX

Beim Erstellen von Formularen habe ich einen unterschiedlichen Grad an Konsistenz in Bezug auf den korrekten Eingabe-Typ für Kreditkarten gesehen. Hier sind meine Vor-und Nachteile für jeden:

type = Text

  • Kann leicht mit verschiedenen Bibliotheken wie cleave.js oder dem Attribut maxLength maskiert werden
  • Mobile Benutzer erhalten keine numerische Tastatur, es sei denn, der Bereich ist auf [0-9] eingestellt (Nur iOS-Benutzer erhalten diese Erfahrung, Android-Benutzer bleiben mit voller Tastatur ausgestattet)

type = Nummer

  • Korrekte Tastatur, die auf iOS und Android angezeigt wird, aber unerwünschte Zeichen können eingegeben werden und maxLength kann nicht eingestellt werden. Min und Max beschränken die Benutzer nicht auf die Eingabe von mehr als 16 Zeichen, sondern geben Fehlermeldungen über die max. * Hinweis: Dieser Eingabetyp ist grundsätzlich ausgeschlossen, da führende 0 gelöscht werden. (Inakzeptabel für CVVs)

type = tel

  • Kann korrekt maskiert werden und wird überall verwendet, ABER kann unbekannte Auswirkungen auf Programme zur Barrierefreiheit und automatische Füllstoffe haben. Wenn jemand eine Klärung über die möglichen Nebenwirkungen der Verwendung dieses Eingabetyps geben kann, wäre das großartig!

Dies sind alle Arten, die mir in den Sinn kamen. Wenn jemand andere Empfehlungen hat, lass es mich wissen!

    
Micheal Friesen 31.01.2018, 03:57
quelle

1 Antwort

1

Es gibt ein Attribut inputmode , das dafür entwickelt wurde, es ist noch nicht implementiert (eigentlich in HTML 5.2 veraltet), aber daran wurde gearbeitet (FF / Chrome).

Ссылка

Und sehen Sie sich diese Diskussion an: Ссылка

Setzen Sie das Autocomplete-Attribut jetzt auf den richtigen Wert: Ссылка

oder implementieren Sie eine benutzerdefinierte Eingabe mit Maske, wie Sie es jetzt verwenden.

    
Dennie de Lange 02.02.2018, 23:21
quelle

Tags und Links