Comment Chrome détecter les champs de Carte de Crédit?

De cette réponse https://stackoverflow.com/a/9795126/292060, il ressemble à Chrome est soit correspondant à une expression régulière pattern sur le nom du champ, ou le formulaire est explicitement à l'aide de la x-autocompletetype attribut, comme cela (Cet exemple utilise "abc" pour éviter de mélanger les problèmes d'appariement sur le nom):

<input type="text" name="somename" x-autocompletetype="cc-number" />

Pratiquement, vous pourriez faire les deux, le choix d'un nom qui correspond à, et le x-autocompletetype:

<input type="text" name="ccnum" x-autocompletetype="cc-number" />

Vous avez une vue de source de la zone de saisie dans votre capture d'écran? Qui permettrait de voir si c'est la mise en correspondance sur le nom ou sur le x-autocompletetype attribut.

La réponse que j'ai lié a plusieurs liens pour plus d'informations, je n'ai pas les répéter ici.

Certains autres commentaires:

Je sais Chrome pop une question de savoir si, pour enregistrer les informations de carte de crédit (je n'en ai pas), mais je ne sais pas si c'est popping cette question indépendamment de la façon dont il l'a détectée. C'est, je ne suis pas sûr si Chrome de saisie semi-automatique des champs séparés pour les cartes de crédit avec d'autres champs, ou si elle a besoin pour sauver la chose comme une carte de crédit.

Votre question était de savoir comment le faire, pas si. Mais à partir du commentaire dans votre question, je suis d'accord que vous pourriez ne pas vouloir de saisie semi-automatique des champs de carte de crédit. Personnellement, je trouve déconcertant quand il arrive, même en sachant qu'il est local dans mon navigateur (j'ai surtout le sentir de cette façon sur le CVV, et obtenir une résistance surprenante quand je le signaler). Cependant, il y a des postes qui trouvent qu'il est frustrant quand un client veut l'utiliser, Chrome mis en place avec des cartes de crédit, et un site web bloque.

OriginalL'auteur

Cette question est assez vieux, mais j'ai un mise à jour de réponse pour 2017!

Vous pouvez désormais indiquer à votre navigateur et qui sont les champs pour les informations de carte de crédit simplement en nommant la <input> correctement.

La réponse suivante est de ma réponse originale à cette question à partir d'ici: https://stackoverflow.com/a/41965106/1696153

Voici un lien officiel de courant WHATWG Standard HTML pour activer la saisie semi-automatique.

Google a écrit un joli guide de nice pour le développement d'applications web qui sont sympa pour les appareils mobiles. Ils ont une section sur la façon de nommer les entrées sur les formes d'utiliser facilement l'auto-remplissage. Eventhough il est écrit pour mobile, cela s'applique pour les ordinateurs de bureau et mobiles!

Comment faire pour Activer la saisie semi-automatique sur vos formulaires HTML

Voici quelques points clés sur la façon d'activer la saisie semi-automatique:

• Utiliser un <label> pour tous vos <input> champs
• Ajouter un autocomplete attribut à votre <input> balises et de le remplir à l'aide de cette guide.
• Nom de votre name et autocomplete attributs correctement pour toutes les <input> tags

• Exemple:

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="[email protected]" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="[email protected]" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

Comment le nom de votre <input> tags

Afin de déclencher la saisie semi-automatique, assurez-vous que vous avez correctement le nom de la name et autocomplete attributs dans votre <input> balises. Cela va automatiquement pour permettre la saisie semi-automatique des formulaires. Assurez-vous également d'avoir un <label>! Cette information peut également être trouvé ici.

Voici comment le nom de vos données:

• Nom
  • Utiliser l'un de ces pour name: name fname mname lname
  • Utiliser l'un de ces pour autocomplete:
    • name (nom complet)
    • given-name (pour le prénom)
    • additional-name (prénom)
    • family-name (pour le nom)
  • Exemple: <input type="text" name="fname" autocomplete="given-name">
• E-mail
  • Utiliser l'un de ces pour name: email
  • Utiliser l'un de ces pour autocomplete: email
  • Exemple: <input type="text" name="email" autocomplete="email">
• Adresse
  • Utiliser l'un de ces pour name: address city region province state zip zip2 postal country
  • Utiliser l'un de ces pour autocomplete:
    • Pour une saisie de l'adresse:
      • street-address
    • Pour les deux adresses entrées:
      • address-line1
      • address-line2
    • address-level1 (état ou province)
    • address-level2 (ville)
    • postal-code (zip code)
    • country
• Téléphone
  • Utiliser l'un de ces pour name: phone mobile country-code area-code exchange suffix ext
  • Utiliser l'un de ces pour autocomplete: tel
• Carte De Crédit
  • Utiliser l'un de ces pour name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Utiliser l'un de ces pour autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Les noms d'utilisateur
  • Utiliser l'un de ces pour name: username
  • Utiliser l'un de ces pour autocomplete: username
• Mots de passe
  • Utiliser l'un de ces pour name: password
  • Utiliser l'un de ces pour autocomplete:
    • current-password (pour signer des formulaires)
    • new-password (pour l'inscription et changement de mot de passe formulaires)

Ressources

• Actuel WHATWG Standard HTML pour la saisie semi-automatique.
• "Créer de superbes Formes" de Google. Semble être mis à jour presque quotidiennement. Excellente lecture.
• "Aider les Utilisateurs à la Caisse plus Rapidement avec remplissage automatique de Google en 2015.

OriginalL'auteur