Comment fonctionne sous forme d'auto-remplissage dans le navigateur de travail?

StackOverflow https://stackoverflow.com/questions/4531750

  •  13-10-2019
  •  | 
  •  

Question

Comment ne forme remplissage automatique le travail dans les navigateurs web modernes?Qui sont les techniques les plus courantes utilisées dans les navigateurs qui implémentent automatique de remplissage de forme?

-- EDIT --

La question n'est pas à propos de la saisie semi-automatique, est sur la forme autofilling, qui ne se soucie pas seulement de la déjà saisi les valeurs, mais tient également compte de la signification et de la structure du champ à remplir.Google Chrome mise en œuvre, par exemple, essaie d'analyser les champs de saisie de deviner de quel type et de la structure.Ou au moins, c'est que ce que j'ai compris dans le code ci-dessus.

Était-ce utile?

La solution

Jetez un oeil sur cette réponse par kmote.

Mettez en surbrillance est que l'apparence du navigateur à la balise name du champ et fait une supposition à quel type de données serait aller là-bas (correspondant regex est une bonne façon naïve de le faire). Chrome travaille à obtenir une sorte de normalisation afin que ce n'est pas tout à fait aussi frappé empirisme.

Autres conseils

Les différentes technologies et navigateurs utilisent diverses méthodes pour calculer à la fois ce que pour afficher ainsi que leur affichage, mais certaines sources à vérifier sont:

  • Description de haut niveau de Google
  • Comment mettre en œuvre avec jQuery (note qu'il ya un jQuery autocomplete aussi).

Si vous êtes à la recherche dans sa mise en œuvre (ou tout simplement l'utiliser) vous, je vous recommande vivement de jeter un oeil au plug-in.

Le premier élément de réponse est tout simplement l'attribut autocomplete de formulaire HTML non standard qui a été introduit avec Internet Explorer il y a quelques années.

Ironie du sort, vous pouvez lire une bonne histoire une introduction sur le site mozilla ici: L'attribut autocomplete et les documents Web en utilisant XHTML

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

Afin de déclencher la saisie semi-automatique, tout ce que vous avez à faire est le nom de ce droit.

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 actuel WHATWG HTML Standard 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:

  • L'utilisation d'un <label> pour toutes vos <input> champs
  • Ajouter un autocomplete attribut pour votre <input> les balises et 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="name@example.com" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" 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 les attributs dans votre <input> les balises.Cela va automatiquement pour permettre la saisie semi-automatique des formulaires.Assurez-vous aussi d'avoir un <label>!Cette information peut également être trouvée ici.

Voici comment le nom de vos données:

  • Nom
    • Utilisez l'un de ces pour name: name fname mname lname
    • Utilisez l'un de ces pour autocomplete:
      • name (nom complet)
      • given-name (pour le prénom)
      • additional-name (pour une moyenne de nom)
      • family-name (pour le nom)
    • Exemple: <input type="text" name="fname" autocomplete="given-name">
  • E-mail
    • Utilisez l'un de ces pour name: email
    • Utilisez l'un de ces pour autocomplete: email
    • Exemple: <input type="text" name="email" autocomplete="email">
  • Adresse
    • Utilisez l'un de ces pour name: address city region province state zip zip2 postal country
    • Utilisez l'un de ces pour autocomplete:
      • Pour une entrée d'adresse:
        • street-address
      • Pour les deux adresses entrées:
        • address-line1
        • address-line2
      • address-level1 (état ou province)
      • address-level2 (ville)
      • postal-code (code postal)
      • country
  • Téléphone
    • Utilisez l'un de ces pour name: phone mobile country-code area-code exchange suffix ext
    • Utilisez l'un de ces pour autocomplete: tel
  • Carte De Crédit
    • Utilisez l'un de ces pour name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Utilisez 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
    • Utilisez l'un de ces pour name: username
    • Utilisez l'un de ces pour autocomplete: username
  • Les mots de passe
    • Utilisez l'un de ces pour name: password
    • Utilisez 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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top