web-dev-qa-db-fra.com

Comment désactiver les suggestions de champs de formulaire de saisie html?

Par suggestions, je veux dire le menu déroulant apparaît lorsque vous commencez à taper, et ses suggestions sont basées sur ce que vous avez déjà tapé:

Example

par exemple, lorsque je tape "a" dans le champ de titre, cela me donne une tonne de suggestions, ce qui est assez ennuyeux. Quelqu'un sait-il comment désactiver cela? Merci d'avance.

htmlform-fields
37
Joseph

Ce que vous voulez, c'est désactiver HTML autocomplete Attribute.

Définir autocomplete = "off" ici a deux effets:

Il empêche le navigateur de sauvegarder les données de champ pour l'auto-complétion ultérieure sur des formulaires similaires, bien que des méthodes heuristiques variant d'un navigateur à l'autre. Il empêche le navigateur de mettre en cache les données de formulaire dans l'historique de session. Lorsque les données de formulaire sont mises en cache dans l'historique de session, les informations renseignées par l'utilisateur seront visibles une fois que l'utilisateur aura soumis le formulaire et cliqué sur le bouton Précédent pour revenir à la page de formulaire d'origine.

En savoir plus sur Réseau MDN

Voici un exemple comment le faire.

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Si c'est sur React), utilisez comme suit:

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

Lien vers réagir à la documentation

Mettre à jour

Voici une mise à jour pour corriger certains navigateurs en ignorant l'indicateur "autocomplete = off".

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>
44
CodeMonkey

Sur Chrome, la seule méthode permettant d'empêcher tous les remplissages de formulaire consistait à utiliser autocomplete="new-password". Appliquez cela à toute entrée qui ne devrait pas être complétée automatiquement et appliquée (même si le champ n'a rien à voir avec les mots de passe, par exemple SomeStateId en remplissant les valeurs du formulaire d'état). Voir ce lien sur la discussion sur les bugs liés au chrome pour plus de détails .

Notez que cela ne fonctionne de manière constante que sur les navigateurs basés sur Chromium et Safari - Firefox ne dispose pas de gestionnaires spéciaux pour ce new-password _ ( voir cette discussion pour plus de détails ).

Mise à jour: Firefox arrive à bord! Nightly v68.0a1 et Beta v67.0b5 (27/03/2019) fonctionnalité de support pour le new-password attribut autocomplete, les versions stables devraient être à venir le 14/05/2019 selon la feuille de route .

7
bsplosion

J'ai fini par changer le champ d'entrée en

<textarea style="resize:none;"></textarea>

Vous n'obtiendrez jamais la saisie semi-automatique pour textareas.

2
Peter B

utilisation autocomplete="off" attribut

Citation: IMPORTANT

Placez l'attribut sur le <input> élément, PAS sur le <form> élément

0
Gigo_G