web-dev-qa-db-fra.com

Saisie de texte à saisie semi-automatique

Je sais qu'il existe de nombreuses solutions JavaScript, mais existe-t-il une méthode HTML5 pour avoir une entrée de texte avec saisie semi-automatique? L'élément datalist est presque ce que je recherche, sauf qu'il vous permet d'entrer des valeurs personnalisées plutôt que de vous limiter à ce qui est dans la liste.

html5formsautocomplete
29
Evanss

HTML5 a un attribut autocomplete qui peut être spécifié comme on ou off dans un champ.

Voici un exemple:

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

La façon dont cela fonctionne est que les valeurs que vous soumettez la première fois vous seront suggérées lors des prochaines visites de cette page sur keyup de chaque champ.

  • Le problème de la clé pour décider d'utiliser cette fonctionnalité est lié à la compatibilité du navigateur. Votre meilleur pari est de vérifier plusieurs navigateurs pour vous assurer que cela fonctionne. caniuse.com rend le support assez mauvais, mais je ne vois aucun mal à l'utiliser pour aider ceux qui ont des browers modernes.

D'autres faits sur autocomplete de W3Schools , ne détestez pas dans ce cas car cela couvre les bases:

  • Lorsque la saisie semi-automatique est activée, le navigateur complète automatiquement les valeurs en fonction des valeurs que l'utilisateur a saisies auparavant.
  • Il est possible d'avoir la saisie semi-automatique "on" pour le formulaire et "off" pour des champs de saisie spécifiques, ou vice versa.
  • L'attribut de saisie semi-automatique fonctionne avec et les types suivants: texte, recherche, URL, tél, e-mail, mot de passe, datepickers, plage et couleur.
14
tim peterson

Vous devriez essayer l'élément datalist. Il est clairement défini dans Recommandation HTML5 W3C , probablement la meilleure option sur le bureau pour l'instant et dans un avenir proche.

L'élément datalist est connecté à un élément input en utilisant l'attribut list sur l'élément d'entrée.

Chaque élément d'option qui est un descendant de l'élément datalist, qui n'est pas désactivé et dont la valeur est une chaîne qui n'est pas la chaîne vide, représente une suggestion. Chaque suggestion a un valeur et un label .

Google chrome et chrome le prennent en charge depuis v21.x (En décembre 2014, la version actuelle est 39, vérifiez l'état de compatibilité de autres navigateurs ici) ) Firefox et Opera prend également en charge depuis longtemps. Modern (!) IE versions supporte partiellement datalist.

Démo: Un grand mise en œuvre de la base de données de travail par Eiji Kitamura.

Polyfill : consultez également le RelevantDropdown . Il s'agit d'un polyfill de liste de données HTML5 qui dépend de jQuery et Modernizr.

Essayez d'exécuter cet exemple:

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

Référence W3: https://www.w3.org/TR/html5/forms.html#the-datalist-element

57
edigu

Cette question est assez ancienne mais j'ai une réponse mise à jour pour 2017 !

Voici un lien vers l'officiel norme WHATWG HTML actuelle pour activer la saisie semi-automatique.

La réponse suivante est tirée de ma réponse originale d'ici: https://stackoverflow.com/a/41965106/169615

Tout ce que vous avez à faire maintenant pour déclencher la saisie semi-automatique est de nommer correctement votre balise input.

Google a écrit un joli joli guide pour développer des applications Web qui sont conviviales pour les appareils mobiles. Ils ont une section sur la façon de nommer les entrées sur les formulaires pour utiliser facilement le remplissage automatique. Même s'il est écrit pour mobile, cela s'applique à la fois au bureau et au mobile!

Comment activer la saisie semi-automatique sur vos formulaires HTML

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

  • Utilisez un <label> pour tous vos <input> champs
  • Ajoutez un attribut autocomplete à votre <input> tags et remplissez-le à l'aide de cette guide .
  • Nommez correctement vos attributs name et autocomplete pour tous les <input> balises

  • 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 nommer votre <input> Mots clés

Afin de déclencher la saisie semi-automatique, assurez-vous de nommer correctement les attributs name et autocomplete dans votre <input> Mots clés. Cela permettra automatiquement la saisie semi-automatique sur les formulaires. Assurez-vous également d'avoir un <label>! Cette information peut également être trouvée ici .

Voici comment nommer vos entrées:

  • Nom
    • Utilisez l'une de ces options pour name: name fname mname lname
    • Utilisez l'une de ces options pour autocomplete:
      • name (pour le nom complet)
      • given-name (pour le prénom)
      • additional-name (pour le deuxième prénom)
      • family-name (pour le nom de famille)
    • Exemple: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Utilisez l'une de ces options pour name: email
    • Utilisez l'une de ces options pour autocomplete: email
    • Exemple: <input type="text" name="email" autocomplete="email">
  • Adresse
    • Utilisez l'une de ces options pour name: address city region province state Zip zip2 postal country
    • Utilisez l'une de ces options pour autocomplete:
      • Pour une entrée d'adresse:
        • street-address
      • Pour deux entrées d'adresse:
        • address-line1
        • address-line2
      • address-level1 (état ou province)
      • address-level2 (ville)
      • postal-code (Code postal)
      • country
  • Téléphone
    • Utilisez l'une de ces options pour name: phone mobile country-code area-code exchange suffix ext
    • Utilisez l'une de ces options pour autocomplete: tel
  • Carte de crédit
    • Utilisez l'une de ces options pour name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Utilisez l'une de ces options pour autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Noms d'utilisateur
    • Utilisez l'une de ces options pour name: username
    • Utilisez l'une de ces options pour autocomplete: username
  • Mots de passe
    • Utilisez l'une de ces options pour name: password
    • Utilisez l'une de ces options pour autocomplete:
      • current-password (pour les formulaires de connexion)
      • new-password (pour les formulaires d'inscription et de changement de mot de passe)

Ressources

10
Katie

Avec HTML5, une saisie semi-automatique de style de suggestion Google est possible sans Javascript!

Voir cet article: "Une suggestion Google de style HTML5"

Cependant, il n'est pas encore suffisamment pris en charge. Les exemples de l'article ne fonctionneront qu'en Opera pour le moment.

Pour l'instant, il est probablement préférable d'utiliser simplement une bibliothèque bien testée avec une large prise en charge du navigateur comme JQuery UI, qui a un widget Autocomplete .

3
DanO

J'ai suivi ce guide MSDN pour appliquer l'entrée de la liste de données pour autoriser uniquement le texte correspondant aux options de la liste de données. Il exploite l'API de validation de contrainte HTML:

http://msdn.Microsoft.com/en-us/magazine/dn133614.aspx

0
user2751200