Question Désactivation de la fonctionnalité de remplissage automatique de Chrome


J'ai eu des problèmes avec le comportement de remplissage automatique de chrome sur plusieurs formes.

Les champs dans le formulaire ont tous des noms très communs et précis, tels que "email", "nom", ou "mot de passe", et ils ont aussi autocomplete="off" ensemble.

L'indicateur de saisie semi-automatique a réussi à désactiver le comportement de saisie semi-automatique, dans lequel une liste déroulante de valeurs s'affiche lorsque vous commencez à taper, mais n'a pas modifié les valeurs que Chrome remplit automatiquement les champs.

Ce comportement serait correct sauf que le chrome remplit mal les entrées, par exemple en remplissant l'entrée du téléphone avec une adresse e-mail. Les clients se sont plaints à ce sujet, donc il a été vérifié que cela se produisait dans plusieurs cas, et non pas comme une sorte de résultat à quelque chose que j'ai fait localement sur ma machine.

La seule solution actuelle est de générer dynamiquement des noms d'entrée personnalisés, puis d'en extraire les valeurs sur le backend, mais cela semble être une solution assez rapide à ce problème. Y at-il des balises ou des caprices qui modifient le comportement de remplissage automatique qui pourrait être utilisé pour résoudre ce problème?


618
2018-04-01 05:45


origine


Réponses:


Pour les nouvelles versions de Chrome, vous pouvez simplement mettre autocomplete="new-password" dans votre champ de mot de passe et c'est tout. Je l'ai vérifié, fonctionne bien.

Vous avez reçu ce conseil du développeur Chrome dans cette discussion: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. n'oubliez pas d'utiliser des noms uniques pour les différents champs afin d'éviter l'autofilling.


580
2018-06-22 09:18



Je viens de découvrir que si vous avez un nom d'utilisateur et un mot de passe mémorisés pour un site, la version actuelle de Chrome remplira automatiquement votre nom d'utilisateur / adresse e-mail dans le champ avant tout type=password champ. Il ne se soucie pas de ce que le champ est appelé - suppose que le champ avant mot de passe va être votre nom d'utilisateur.

Ancienne solution

Juste utiliser <form autocomplete="off"> et il empêche le pré-remplissage du mot de passe ainsi que tout type de remplissage heuristique des champs en fonction des hypothèses qu'un navigateur peut faire (ce qui est souvent faux). Au lieu d'utiliser <input autocomplete="off"> ce qui semble être à peu près ignoré par le mot de passe autofill (dans Chrome, Firefox y obéit).

Solution mise à jour

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

Créez simplement quelques champs et cachez-les 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 champs réels en dessous.

N'oubliez pas d'ajouter le commentaire ou d'autres personnes de votre équipe se demanderont ce que vous faites!

Mise à jour Mars 2016

Juste testé avec le dernier Chrome - tout bon. C'est une réponse assez ancienne maintenant, mais je veux juste mentionner que notre équipe l'utilise depuis des années sur des dizaines de projets. Cela fonctionne toujours bien malgré quelques commentaires ci-dessous. Il n'y a pas de problèmes d'accessibilité car les champs sont display:none ce qui signifie qu'ils ne sont pas ciblés. Comme je l'ai mentionné, vous devez les mettre avant vos vrais champs.

Si vous utilisez javascript pour modifier votre formulaire, il y a une astuce supplémentaire dont vous aurez besoin. Montrez 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 juillet 2018

Ma solution ne fonctionne plus aussi bien depuis que les experts anti-utilisabilité 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 le plus souvent le problème.

Cependant, cela ne fonctionne pas lorsque vous n'avez pas de champ de mot de passe mais seulement une adresse e-mail. Cela peut aussi être difficile à obtenir pour arrêter de jaunir et de pré-remplir. La solution de faux champs peut être utilisée pour résoudre ce problème.

En fait, vous devez parfois déposer deux lots de faux champs et les essayer dans des endroits différents. Par exemple, j'avais déjà de faux champs au début de mon formulaire, mais Chrome a récemment commencé à pré-remplir de nouveau mon champ 'Email' - alors j'ai doublé et mis plus de faux champs juste avant le champ 'Email', et ça l'a corrigé . La suppression du premier ou du deuxième lot des champs revient à un autofill incorrect et trop zélé.


483
2018-04-10 04:54



Après des mois et des mois de lutte, j'ai trouvé que la solution est beaucoup plus simple que vous ne pouvez l'imaginer:

Au lieu de autocomplete="off" utilisation autocomplete="false" ;)

Aussi simple que cela, et cela fonctionne comme un charme dans Google Chrome aussi bien!


208
2018-04-11 19:57



Parfois même autocomplete=off woon't empêcher le remplissage des informations d'identification dans les champs erronés.

Une solution de contournement consiste à désactiver la fonctionnalité de remplissage automatique du navigateur à l'aide de readonly-mode et à définir l'écriture en mode focus:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

le focus L'événement se produit lors de clics de souris et de tabulation dans les champs.

Mettre à jour:

Mobile Safari place le curseur dans le champ, mais n'affiche pas le clavier virtuel. Cette nouvelle solution de contournement fonctionne comme avant, mais gère le clavier virtuel:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Démonstration en direct https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explication: Le navigateur remplit automatiquement les informations d'identification dans un mauvais champ de texte?

remplir les entrées incorrectement, par exemple remplir l'entrée du téléphone avec une adresse e-mail

Parfois, je remarque ce comportement étrange sur Chrome et Safari, quand il y a des champs de mot de passe dans la même forme. Je suppose que le navigateur cherche un champ de mot de passe pour insérer vos informations d'identification enregistrées. Puis il autofills Nom d'utilisateur dans le champ de saisie textlike le plus proche, qui apparaît avant le champ de mot de passe dans DOM (juste deviner en raison de l'observation). Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,

Ce readonly-fix ci-dessus a fonctionné pour moi.


72
2017-11-14 13:32



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

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

J'ai essayé les deux méthodes

<form autocomplete="off"> et <input autocomplete="off"> mais aucun d'eux n'a travaillé pour moi.

Je l'ai donc corrigé en utilisant l'extrait ci-dessous - juste ajouté un autre champ de texte juste au-dessus du champ de type de mot de passe et l'ai fait 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 ça va aider quelqu'un.


57
2018-05-14 05:13



Je ne sais pas pourquoi, mais cela a aidé et travaillé pour moi.

<input type="password" name="pwd" autocomplete="new-password">

Je ne sais pas pourquoi, mais autocompelete = "nouveau mot de passe"désactive le remplissage automatique. Cela a fonctionné au plus tard 49.0.2623.112 version chromée.


42
2018-04-12 22:05



Pour moi, simple

<form autocomplete="off" role="presentation">

L'a fait.

Testé sur plusieurs versions, le dernier essai était sur 56.0.2924.87


27
2017-09-03 07:00



Vous devez ajouter cet attribut:

autocomplete="new-password"

Lien source: Article complet 


20
2017-10-21 14:12



C'est tellement simple et délicat :)

google chrome essentiellement chercher chaque premier élément de mot de passe visible à l'intérieur de <form>, <body> et <iframe> tags pour activer le remplissage automatique pour eux, donc pour désactiver cela, vous devez ajouter un élément de mot de passe factice comme suit:

    • si votre élément de mot de passe à l'intérieur d'un <form> tag vous devez mettre l'élément factice comme le premier élément de votre formulaire immédiatement après <form> étiquette ouverte

    • si votre élément de mot de passe n'est pas dans un <form> tag mettre l'élément factice comme le premier élément de votre page html immédiatement après <body> étiquette ouverte

  1. Vous devez masquer l'élément factice sans utiliser css display:none Donc, fondamentalement, utilisez ce qui suit comme un élément de mot de passe factice.

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    

17
2018-03-16 08:24