Désactiver le remplissage automatique de Chrome

Question

J'ai rencontré des problèmes avec le comportement de remplissage automatique de chrome sur plusieurs formulaires.

Les champs du formulaire ont tous des noms très courants et précis, tels que "email", "nom" ou "mot de passe", et ils ont également autocomplete="off" set.

L'indicateur de complétion automatique a permis de désactiver le comportement de la complétion automatique, où une liste déroulante de valeurs apparaît lorsque vous commencez à taper, mais n'a pas modifié les valeurs que Chrome remplit automatiquement dans les champs.

Ce comportement serait correct si chrome ne remplissait pas les entrées de manière incorrecte, par exemple en remplissant l'entrée téléphone par une adresse e-mail. Des clients se sont plaints de ce problème, il est donc avéré qu'il se produit dans de nombreux cas, et non pas comme une sorte de résultat de quelque chose que j'ai fait localement sur ma machine.

La seule solution actuelle à laquelle je pense est de générer dynamiquement des noms d'entrées personnalisées, puis d'extraire les valeurs en arrière-plan, mais cela semble être un moyen assez compliqué de contourner ce problème. Existe-t-il des balises ou des bizarreries qui modifient le comportement du remplissage automatique et qui pourraient être utilisées pour résoudre ce problème ?

Answer 1

Je viens de découvrir que si vous vous souvenez d'un nom d'utilisateur et d'un mot de passe pour un site, la version actuelle de Chrome remplit automatiquement votre nom d'utilisateur et votre adresse électronique dans le champ le champ avant tout type=password champ. Il ne se soucie pas du nom du champ - il suppose simplement que le champ précédant le mot de passe sera votre nom d'utilisateur.

Ancienne solution

Il suffit d'utiliser <form autocomplete="off"> et il empêche le pré-remplissage du mot de passe ainsi que tout type de remplissage heuristique des champs basé sur des suppositions que le navigateur peut faire (qui sont souvent fausses). Contrairement à l'utilisation de <input autocomplete="off"> qui semble être pratiquement ignoré par le remplissage automatique du mot de passe (dans Chrome en tout cas, Firefox l'ignore).

Solution actualisée

Chrome ignore désormais <form autocomplete="off"> . Par conséquent, ma solution de rechange originale (que j'avais supprimée) fait maintenant fureur.

Il suffit de créer quelques champs et de les rendre cachés avec "display:none". Exemple :

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />

Ensuite, mettez vos vrais champs en dessous.

N'oubliez pas d'ajouter le commentaire, sinon les autres membres de votre équipe se demanderont ce que vous faites !

Mise à jour mars 2016

Je viens de tester avec la dernière version de Chrome - tout va bien. Il s'agit d'une réponse assez ancienne, mais je tiens à préciser que notre équipe l'utilise depuis des années sur des dizaines de projets. Il fonctionne toujours très bien malgré les quelques commentaires ci-dessous. Il n'y a pas de problème d'accessibilité car les champs sont display:none ce qui signifie qu'ils ne sont pas mis au point. Comme je l'ai mentionné, vous devez les mettre avant vos champs réels.

Si vous utilisez le javascript pour modifier votre formulaire, il y a une astuce supplémentaire dont vous aurez besoin. Affichez les faux champs pendant que vous manipulez le formulaire, puis cachez-les à nouveau une milliseconde plus tard.

Exemple de code utilisant jQuery (en supposant que vous donniez une classe à vos faux champs) :

$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
  $(".fake-autofill-fields").hide();
}, 1);

Mise à jour de juillet 2018

Ma solution ne fonctionne plus aussi bien depuis que les experts en anti-utilisation de Chrome ont travaillé dur. Mais ils nous ont jeté un os sous la forme de.. :

<input type="password" name="whatever" autocomplete="new-password" />

Cela fonctionne et résout en grande partie le problème.

Cependant, cela ne fonctionne pas lorsque vous n'avez pas de champ pour le mot de passe mais seulement une adresse électronique. Dans ce cas également, il peut être difficile de faire en sorte que le système cesse de se comporter en jaune et de préremplir le champ. La solution des faux champs peut être utilisée pour résoudre ce problème.

En fait, il est parfois nécessaire de déposer deux lots de faux champs, et de les essayer à des endroits différents. Par exemple, j'avais déjà des champs factices au début de mon formulaire, mais Chrome a récemment recommencé à pré-remplir le champ "Email". J'ai donc ajouté d'autres champs factices juste avant le champ "Email", ce qui a réglé le problème. En supprimant le premier ou le deuxième lot de champs, on revient à un remplissage automatique incorrect et trop zélé.

Mise à jour en mars 2020

Il n'est pas clair si et quand cette solution fonctionne encore. Il semble qu'elle fonctionne encore parfois, mais pas tout le temps.

Dans les commentaires ci-dessous, vous trouverez quelques indices. L'un d'entre eux, ajouté par @anilyeni, mérite peut-être d'être approfondi :

Comme je l'ai remarqué, autocomplete="off" fonctionne sous Chrome 80, s'il y a moins de trois éléments dans le fichier <form> . Je ne sais pas quelle est la logique ni où se trouve la documentation à ce sujet.

Ce message de @dubrox peut également être pertinent, bien que je ne l'aie pas testé :

Merci beaucoup pour l'astuce, mais veuillez mettre à jour la réponse, car display:none; ne fonctionne plus, mais position: fixed;top:-100px;left:-100px; width:5px; fait :)

Mise à jour AVRIL 2020

Valeur spéciale pour le chrome pour cet attribut fait le travail : (testé sur l'entrée - mais pas par moi) autocomplete="chrome-off"

Answer 2

Essaie ça. Je sais que la question est un peu ancienne, mais c'est une approche différente du problème.

J'ai également remarqué que le problème se situe juste au-dessus de la password champ.

J'ai essayé les deux méthodes comme

<form autocomplete="off"> y <input autocomplete="off"> mais aucun d'entre eux n'a fonctionné pour moi.

J'ai donc corrigé le problème en utilisant le snippet ci-dessous - j'ai simplement ajouté un autre champ de texte juste au-dessus du champ du type de mot de passe et je l'ai créé comme suit display:none .

Quelque chose comme ça :

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

J'espère que cela aidera quelqu'un.

Answer 3

J'ajoute cette partie pour un point de vue différent. Pourquoi ne pas utiliser un pot de miel pour empêcher Chrome de botter vos champs ? Cela semble fonctionner sur plusieurs navigateurs pour moi. Ça vaut le coup d'essayer.

http://benjaminjshore.info/2014/05/chrome-auto-fill-honey-pot-hack.html

Answer 4

Essayez ce qui suit jQuery qui a fonctionné pour moi.

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

Answer 5

La seule façon qui fonctionne pour moi est :(jQuery requis)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});