web-dev-qa-db-fra.com

Quel est le type de saisie correct pour les numéros de carte de crédit?

TLDR: Quel type d'entrée peut utiliser les claviers numériques mobiles ET le masquage d'outil avec des espaces injectés et une limite maximale d'entrées CVV et de carte de crédit, tels que: XXXX XXXX XXXX XXXX

Lors de la création de formulaires, j'ai constaté un degré de cohérence variable autour du type de saisie correct pour les cartes de crédit. Voici mes avantages et inconvénients découverts pour chacun:

type = text

  • Capable de masquer facilement avec diverses bibliothèques telles que cleave.js ou set maxLength attribut
  • Les utilisateurs mobiles ne reçoivent pas de clavier uniquement numérique, sauf si la plage de réglage est définie sur [0-9] (seuls les utilisateurs iOS bénéficieront de cette expérience, laissant ainsi aux utilisateurs d'Android un clavier complet).

type = nombre

  • Le clavier approprié affiché sur iOS et Android, mais des caractères non souhaités peuvent être entrés et aucune longueur maximale ne peut être définie. Min et Max n'empêchent pas les utilisateurs de saisir plus de 16 caractères, mais fournissent des messages d'erreur lorsqu'ils dépassent le nombre maximal. * Remarque: ce type d'entrée est essentiellement exclu en raison de la suppression des 0 premiers. (Inacceptable pour les CVV)

type = tel

  • Capable de masquer correctement et d'être utilisé partout, MAIS peut avoir des effets inconnus sur les programmes d'accessibilité et les remplissages automatiques. Si quelqu'un pouvait fournir des éclaircissements sur les effets secondaires potentiels de l'utilisation de ce type d'entrée, ce serait génial! 

Ce sont tous les types qui sont venus à l'esprit. Si quelqu'un a d'autres recommandations, s'il vous plaît faites le moi savoir!

htmlgoogle-chrome
15
Micheal Friesen

Il y a un attribut inputmode qui est conçu pour cela, il n'est pas encore implémenté (actuellement déconseillé en HTML 5.2), mais des travaux sont en cours (FF/Chrome). 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Et voyez cette discussion: https://github.com/whatwg/html/issues/3290

Pour l'instant, définissez l'attribut autocomplete sur la valeur correcte: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

ou implémenter une entrée personnalisée avec masque comme vous utilisez maintenant. 

1
Dennie de Lange