Désactiver le remplissage automatique de Chrome


620

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 "e-mail", "nom" ou "mot de passe", et ils ont également été autocomplete="off"définis.

L'indicateur de saisie semi-automatique a réussi à désactiver le comportement de saisie semi-automatique, où une liste déroulante de valeurs apparaît lorsque vous commencez à taper, mais n'a pas modifié les valeurs sous lesquelles Chrome remplit automatiquement les champs.

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

La seule solution actuelle à laquelle je peux penser est de générer dynamiquement des noms d'entrée personnalisés puis d'extraire les valeurs sur le backend, mais cela semble être un moyen assez hacky de contourner ce problème. Y a-t-il des balises ou des bizarreries qui modifient le comportement de remplissage automatique qui pourraient être utilisées pour résoudre ce problème?


6
Ce n'est pas un doublon. Celui-ci gère la désactivation du remplissage automatique, celui-ci gère le style de la couleur de remplissage automatique ...
Nicu Surdu

17
autocomplete = "false" au lieu de autocomplete = "off" selon la réponse de Kaszoni Ferencz, votez pour cela les gens.
roughcoder

7
Regardez le nombre de réponses à cette question - cela devrait vous dire quelque chose: vous livrez une bataille perdue. Ce n'est plus un problème avec Chrome, Firefox et d'autres ont emboîté le pas. Qu'on le veuille ou non, vous devez accepter la décision de l'industrie des navigateurs, ce formulaire de saisie automatique est le choix de l'utilisateur - vous pouvez les combattre, mais vous perdrez. À la fin de la journée, la question que vous devriez vous poser n'est pas: comment puis-je inverser la saisie semi-automatique, mais plutôt comment créer des formulaires qui fonctionnent bien avec la saisie semi-automatique. Vos préoccupations concernant la sécurité ne vous concernent pas, mais les utilisateurs.
mindplay.dk

21
Désolé, mais la réponse de @ mindplay.dk est contre-productive. Ma situation est que j'ai des utilisateurs qui se sont connectés à mon site et une page sur le site leur permet d'entrer des informations de compte / pwd pour d'autres systèmes. Lorsque je mets en place un dialogue pour qu'ils en saisissent un nouveau, leurs informations de connexion pour mon site sont remplies, ce qui est complètement faux et causera des problèmes si / lorsque les utilisateurs saisissent ces informations par inadvertance. Les deux n'ont rien à voir avec L'une et l'autre. Dans ce cas, le navigateur fait quelque chose de contraire à ce que veut l'utilisateur.
Mike K du

8
@ mindplay.dk - Mon application Web est une application de gestion des flux de travail pour le lieu de travail, donc, non, les préoccupations concernant la sécurité sont à moi, comme le mandatent les cadres supérieurs et doivent être respectées par tous les employés, alias "les utilisateurs". " Cependant, leur demander de définir eux-mêmes Chrome, IE ou tout autre navigateur va laisser des lacunes dans le processus d'authentification, car ils peuvent, intentionnellement ou non, se retrouver en utilisant le remplissage automatique. Toutes les applications Web ne sont pas du même type, avec les mêmes types d'utilisateurs ou de préoccupations.
PoloHoleSet

Réponses:


906

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

J'ai eu cette astuce du développeur Chrome dans cette discussion: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS Notez que Chrome tentera d'inférer le comportement de remplissage automatique à partir du nom, de l'ID et de tout contenu texte qu'il peut obtenir autour du champ, y compris les étiquettes et les nœuds de texte arbitraires. S'il existe un jeton de saisie semi-automatique comme street-addressdans le contexte, Chrome le remplira automatiquement en tant que tel. L'heuristique peut être assez déroutante car elle ne se déclenche parfois que s'il y a des champs supplémentaires dans le formulaire, ou non s'il y a trop peu de champs dans le formulaire. Notez également que autocomplete="no"cela semble fonctionner, mais autocomplete="off"pas pour des raisons historiques. autocomplete="no"est-ce que vous dites au navigateur que ce champ doit être rempli automatiquement comme un champ appelé "no". Si vous générez des autocompletenoms aléatoires uniques, vous désactivez la saisie semi-automatique.

Si vos utilisateurs ont visité des formulaires incorrects, leurs informations de saisie automatique peuvent être corrompues . Les faire entrer manuellement et corriger leurs informations de remplissage automatique dans Chrome peut être une action nécessaire de leur part.


115
'new-password' a fonctionné pour moi après avoir essayé 'off' et 'false'
Kevin

26
C'est le seul correctif qui fonctionne actuellement. Faux et éteint, ne fonctionnent plus. Devrait être la bonne réponse maintenant.
David

5
La raison pour laquelle cela fonctionne est que l'équipe Chrome essaie de créer des valeurs de saisie semi-automatique recommandées, comme indiqué @ developers.google.com/web/fundamentals/design-and-ui/input/… La valeur "new-password" est l'une des valeurs quelques-uns qui ont une logique supplémentaire l'entourant, et dans ce cas, sa suspension de remplissage automatique mais autorise toujours les suggestions de
saisie semi-

30
Ne fonctionne pas à partir du 1.13.2018 version 63.0.3239.132 (version officielle) (64 bits)
PellucidWombat

37
Je voulais juste dire .. Après être tombé sur ce problème .. Chrome est un vrai travail. Alors maintenant, nous devons sauter à travers des cerceaux pour désactiver la fonctionnalité qui devait rester facultative. Dans quel monde la saisie automatique serait-elle nécessaire dans une application métier où l'adresse est nouvelle / différente à chaque fois. Google devient aussi mauvais que Microsoft.
Eddy Howard

700

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=passwordchamp. Peu importe comment le champ est appelé - il suppose simplement que le champ avant que le mot de passe devienne votre nom d'utilisateur.

Ancienne solution

Il suffit de l'utiliser <form autocomplete="off">et cela empêche le pré-remplissage du mot de passe ainsi que tout type de remplissage heuristique des champs basé sur les hypothèses qu'un navigateur peut faire (qui sont souvent erronées). Contrairement à l'utilisation <input autocomplete="off">qui semble être à peu près ignorée par la saisie automatique du mot de passe (dans Chrome, c'est-à-dire que 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 masquez-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"/>

Mettez ensuite vos vrais champs 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

Je viens de tester avec le dernier Chrome - tout va bien. C'est une réponse assez ancienne maintenant, mais je tiens à mentionner que notre équipe l'utilise depuis des années sur des dizaines de projets. Cela fonctionne toujours très bien malgré quelques commentaires ci-dessous. L'accessibilité ne pose aucun problème car les champs display:nonesignifient qu'ils ne sont pas ciblés. Comme je l'ai mentionné, vous devez les mettre avant vos vrais domaines.

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

Exemple de code utilisant jQuery (en supposant que vous donnez 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 si 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 principalement le problème.

Cependant, cela ne fonctionne pas lorsque vous n'avez pas de champ de mot de passe mais uniquement une adresse e-mail. Il peut également être difficile de faire en sorte qu'il cesse de jaunir et de préremplir. La solution des 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 à différents endroits. Par exemple, j'avais déjà de faux champs au début de mon formulaire, mais Chrome a récemment recommencé à préremplir mon champ "E-mail" - alors j'ai doublé et ajouté plus de faux champs juste avant le champ "E-mail", et cela l'a corrigé . La suppression du premier ou du deuxième lot des champs revient à une saisie automatique trop zélée.

Mise à jour mars 2020

Il n'est pas clair si et quand cette solution fonctionne toujours. Il semble toujours fonctionner parfois mais pas tout le temps.

Dans les commentaires ci-dessous, vous trouverez quelques conseils. Celui qui vient d'être ajouté par @anilyeni mérite peut-être une enquête plus approfondie:

Comme je l'ai remarqué, autocomplete="off"fonctionne sur Chrome 80, SI il y a moins de 3 éléments <form>. Je ne sais pas quelle est la logique ou où la documentation connexe à ce sujet.

Aussi celui de @dubrox peut être pertinent, bien que je ne l'ai pas testé:

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

Mise à jour AVRIL 2020

La valeur spéciale pour le chrome pour cet attribut fait le travail: (testé en entrée - mais pas par moi) autocomplete="chrome-off"


7
J'étais tellement sûr que cela fonctionnerait car vous avez parfaitement expliqué le remplissage automatique heuristique que je rencontre avec le champ d'entrée avant le mot de passe. Malheureusement, cela n'a pas fonctionné pour moi, j'ai mis autocomplete = "off" sur le formulaire et toutes les entrées et ils sont toujours remplis. La seule solution qui a fonctionné pour moi est dans le lien de goodeye ci-dessus. (placer une deuxième entrée de type caché = "mot de passe" avant que le mot de passe ne supprime les vérifications heuristiques de Chrome)
parlement

19
Cela fonctionnait très bien, je l'ai utilisé aussi, mais depuis une mise à niveau de Chrome il y a quelque temps (entre le 5 mai et alors), Chrome ignore la propriété du formulaire :(
Tominator

13
Google a pris la décision dans (Chrome v34 je pense) de faire en sorte que la politique ignore TOUJOURS maintenant la saisie semi-automatique = "off", y compris les directives au niveau du formulaire ... ce serait bien si les bons champs étaient vraiment corrects.
Jammer

10
essayez autocomplete = "false" pas autocomplete = "off"
roughcoder

243
Cet attribut est également requis:autocomplete="I told you I wanted this off, Google. But you would not listen."
rybo111

265

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 d' autocomplete="off"utilisation autocomplete="false";)

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


Mise à jour d'août 2019 (crédit à @JonEdiger dans les commentaires)

Remarque: de nombreuses informations en ligne indiquent que les navigateurs considèrent désormais autocomplete = 'false' comme identique à autocomplete = 'off'. Au moins pour l'instant, cela empêche la saisie semi-automatique pour ces trois navigateurs.

Définissez-le au niveau du formulaire, puis pour les entrées que vous souhaitez désactiver, définissez une valeur non valide telle que «aucune»:

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

8
A travaillé pour moi! Mais il y a une remarque importante: j'ai 5 champs dans ma page Web: nom, adresse, code postal, téléphone et e-mail. Lorsque j'ai inclus autocomplete = 'false' sur le formulaire et dans le champ Nom, cela fonctionnait toujours. Cependant, lorsque j'ai inclus l'autocomplete = 'false' également dans le champ Adresse, il a finalement arrêté de les remplir automatiquement! Donc, vous devez mettre la propriété de saisie semi-automatique non pas dans le champ de connexion ou de nom, mais aussi dans les champs suivants! (A travaillé sur Chrome 43.0.2357.81 à partir du 2015-05-27)
Dvd Franco

45
SI CELA NE FONCTIONNE PAS POUR VOUS: Gardez à l'esprit qu'il existe 2 façons dont Chrome "aide" les utilisateurs. AUTOCOMPLETE invitera en fonction de la soumission précédente dans le même formulaire déposé et affectera les personnes qui utilisent le formulaire plus d'une fois. La saisie semi-automatique est désactivée avec la saisie semi-automatique = "off". AUTOFILL vous invitera en fonction du carnet d'adresses des formulaires similaires précédemment remplis sur d'autres pages. Il mettra également en évidence les domaines qu'il modifie. Le remplissage automatique peut être désactivé avec autocomplete = "false".
genkilabs

4
Cela ne fonctionne pas pour moi (version 43.0.2357.124 m). Il s'agit probablement d'une erreur de Google, qui a maintenant été résolue. Ils semblent penser "l'utilisateur a toujours raison" en ce sens qu'ils veulent tout remplir automatiquement. Le problème est que mon formulaire d'inscription enregistre les données de l'utilisateur comme le fait le formulaire de connexion, ce qui n'est certainement pas ce que l'utilisateur souhaite ...
rybo111

3
YEP Cela fonctionne dans Chrome 43.0.2357 !! ce comportement dans Chrome est tellement ennuyeux, et cette solution de contournement m'a pris un certain temps pour comprendre. Merci pour votre réponse.
Adriano Rosa

3
ne fonctionne pas avec Chrome 44.0.2403.157. Comment cette fonctionnalité peut-elle fonctionner et ne pas fonctionner avec différentes versions. C'est ridicule
Mattijs

120

Parfois même, autocomplete=offcela n'empêchera pas de remplir des informations d'identification dans de mauvais champs.

Une solution de contournement consiste à désactiver le remplissage automatique du navigateur à l'aide du mode lecture seule et à définir l'écriture sur le focus:

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

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

Mise à 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émo en direct https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

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

remplir les entrées de manière incorrecte, par exemple en remplissant 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 sous la même forme. Je suppose que le navigateur recherche un champ de mot de passe pour insérer vos informations d'identification enregistrées. Ensuite, il remplit automatiquement le nom d'utilisateur dans le champ de saisie de texte le plus proche, qui apparaît avant le champ de mot de passe dans DOM (deviner simplement en raison de l'observation). Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,

Cette correction en lecture seule ci-dessus a fonctionné pour moi.


12
quelle bonne solution :) vous devriez remplacer jquery par ceci: this.removeAttribute ("class")
Roey

Je l'ai utilisé pour empêcher le remplissage automatique d'une dropdwonlist. Mais aussi restylé en lecture seule pour ne pas le regarder. Idée sympa!
ComfortablyNumb

1
@Clint: mon extrait de code ci-dessus supprime l' attribut en lecture seule dès que l'utilisateur entre dans le champ (par clic de souris ou touche de tabulation). Je suppose que vous faites référence à un champ, qui est protégé contre le remplissage automatique , mais pas touché par l'utilisateur. Quel est cet objectif sur le terrain - et doit-il vraiment être protégé? Selon le scénario, la suppression de tous les attributs en lecture seule lors de la soumission peut être une option. Pouvez-vous ajouter un commentaire plus spécifique sur votre problème? Peut-être que je peux vous aider :)
dsuess

1
Si vous utilisez JavaScript. pourquoi ne pas simplement définir la valeur sur dummy, puis la supprimer à nouveau? Ajouter et supprimer en lecture seule sonne comme un mouvement dangereux - et si le navigateur ne veut pas que vous vous concentriez dessus?
rybo111

1
Apparemment, Google essaie de prendre des décisions pour nous tous ici, ils ont fermé le ticket concernant la saisie semi-automatique = "off": bugs.chromium.org/p/chromium/issues/detail?id=468153 . Mais un autre ticket est ouvert pour collecter des cas d'utilisateurs valides pour désactiver la saisie automatique, veuillez répondre à ce ticket pour sensibiliser davantage à ce problème ici: bugs.chromium.org/p/chromium/issues/detail?id=587466
Norman Xu

80

Si vous implémentez une fonctionnalité de zone de recherche, essayez de définir l' typeattribut searchcomme suit:

<input type="search" autocomplete="off" />

Cela fonctionne pour moi sur Chrome v48 et semble être un balisage légitime:

https://www.w3.org/wiki/HTML/Elements/input/search


Oui! :) Merci! Cela fonctionne dans Chrome 67.0.3396.99. (Je pense que votre lien devrait être: w3.org/wiki/HTML/Elements/input/search à partir de septembre 2018).
Andy King

4
Finalement! fonctionne toujours Version 69.0.3497.100 (version officielle) (64 bits) Cela devrait être la vraie réponse!
Venson

1
tout le monde a raison et tort et en même temps, vous devez écrire autocomplete = "off" à l'intérieur de la balise <form autocomplete = "off"> à la place en entrée et cela arrêtera le comportement de remplissage automatique
demopix

2
Fonctionne également si vous définissez autocomplete = "off" sur le formulaire (pour modifier cette valeur par défaut à l'échelle du formulaire) et qu'il vous suffit ensuite de définir type = "search" sur le <input>
John

9
Après la version 72.XX de Chrome, ce correctif ne fonctionne pas. Trouvez le dernier fixe ici stackoverflow.com/a/55045439/1161998
Adheep Mohamed Abdul Kader

65

Essaye ça. Je sais que la question est un peu ancienne, mais il s'agit d'une approche différente du problème.

J'ai également remarqué que le problème venait juste au-dessus du passwordterrain.

J'ai essayé les deux méthodes comme

<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 de code ci-dessous - j'ai simplement ajouté un autre champ de texte juste au-dessus du champ de type de mot de passe et je l'ai créé 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.


1
Celui-ci a fonctionné pour moi (pour l'instant). J'ai constaté que j'ai utilisé environ une demi-douzaine de hacks différents au fil du temps, et après un certain temps, Chrome décide qu'il veut vaincre ce hack. Il en faut donc un nouveau, comme celui-ci. Dans ma demande, j'ai un formulaire de mise à jour de profil avec des champs de courrier électronique et de mot de passe qui doivent être laissés en blanc à moins que l'utilisateur ne souhaite apporter des modifications. Mais lorsque Chrome remplit automatiquement, il place l'ID utilisateur dans le champ "confirmation par e-mail", ce qui entraîne toutes sortes de conditions d'erreur, qui conduisent à d'autres conditions d'erreur, car l'utilisateur s'efforce d'essayer de faire la bonne chose.
Jeffrey Simon

2
Une explication rapide de la raison pour laquelle ce hack fonctionne (pour l'instant): Chrome voit le premier type = mot de passe et le remplit automatiquement et il suppose que le champ juste avant cela DOIT être le champ userhame, et remplit automatiquement ce champ avec le nom d'utilisateur. @JeffreySimon, cela devrait expliquer le phénomène de l'ID utilisateur dans le champ de confirmation par e-mail (je voyais la même chose sur mon formulaire).
MrBoJangles

1
@kentcdodds - vous ne savez pas ce que vous entendez par ne plus travailler. Votre jsbin n'a pas de champ de mot de passe, la situation est donc différente. J'utilise cette solution depuis des années et, plus récemment, j'ai remarqué qu'elle était nécessaire et qu'elle a fonctionné pour moi la semaine dernière (mars 2015).
mike nelson

1
Hourra! Une solution qui semble fonctionner! Je conseillerais de donner au champ le nom passwordet d'avoir actual_passwordpour le champ légitime, car Google semble maintenant regarder le name. Cependant, cela signifie que Chrome n'enregistrera pas le mot de passe, qui est la fonctionnalité que je souhaite réellement . AAAAARRRRGHH!
rybo111

2
Mise à jour: Cela continue de fonctionner pendant plus d'un an depuis la dernière fois que je l'ai implémenté. Nous pouvons avoir un solide gagnant ici.
MrBoJangles

48

Je ne sais pas pourquoi, mais cela m'a aidé et a fonctionné pour moi.

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

Je ne sais pas pourquoi, mais autocompelete = "new-password" désactive le remplissage automatique. Il a fonctionné dans la dernière version chromée 49.0.2623.112 .


Mis à jour mon chrome, et cela fonctionne toujours pour moi. 50.0.2661.87 (64bit)
Tauras

Malheureusement, lors de l'envoi du formulaire (ou lorsque les champs de saisie sont masqués / supprimés), Chrome demande alors d'enregistrer la connexion modifiée.
sibbl

Fonctionne dans la version 51.0.2704.79 m
Geoffrey Hale

putain de putain pourquoi ça marche? est-ce un bug? parce que je l'ai testé ici et que je ne l'ai placé que dans une seule entrée et que j'ai travaillé pour le login et le mot de passe d'entrée, mais je ne l'ai mis que dans le mot de passe
Leandro RR

Je n'ai aucune idée. Je pense que c'est une "chose" chromée qui a été faite par les développeurs. Peut-être que je me trompe.
Tauras

46

Pour moi, simple

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

L'a fait.

Testé sur plusieurs versions, le dernier essai a eu lieu le 56.0.2924.87


La version @ArnoldRoa a été ajoutée, elle est sur notre site depuis le jour où je l'ai publiée et il y avait quelques versions où cela fonctionnait bien. Quelle version utilisez-vous? PC / Mac?
Kuf

Ne fonctionne pas sur 57.0.2987.110. Chrome le met en surbrillance jaune et préremplit le champ avec mon mot de passe enregistré. Mais la page est une page de gestion des utilisateurs, pas une page de connexion.

1
@Dummy Je l'ai testé maintenant sur Chrome dernier (57) et cela fonctionne toujours pour moi. Avez-vous fait quelque chose de spécial avec les champs de saisie? tu as mis ton code quelque part que je pourrais essayer de reproduire?
Kuf

3
Version 64.0.3282.186 (version officielle) (64 bits) Windows. 01-03-2018 NE FONCTIONNE PAS pour désactiver la saisie automatique.
billy jean

2
Je suis sûr que cela supprime le formulaire / l'entrée des technologies d'assistance w3c.github.io/using-aria/#ariapresentation
Olex Ponomarenko


19

C'est tellement simple et délicat :)

Google Chrome recherche essentiellement chaque premier élément de mot de passe visible à l'intérieur du <form>, <body>et les <iframe>balises pour activer la recharge automatique pour eux, donc pour le désactiver, 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'une <form>balise, vous devez mettre l'élément factice comme premier élément de votre formulaire immédiatement après la <form>balise ouverte

    • si votre élément de mot de passe ne se trouve pas dans une <form>balise, mettez l'élément factice comme premier élément dans votre page html immédiatement après la <body>balise ouverte

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

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

1
Excellent travail, comment avez-vous découvert l'algorithme de Chrome? Je viens de découvrir que mon ancienne méthode de modification de la valeur avec JS après le chargement de la page avec une minuterie setTimeout ne fonctionne plus. Mais cela fonctionne parfaitement!

Malheureusement, ne fonctionne pas pour les entrées TextBox normales.
eYe

1
en fait, cela fonctionne, il suffit de définir la propriété name;)
Fareed Alnamrouti

Sur Chrome 58, cela ne fonctionne pas. Utilisez la largeur: 1px. Si le champ du mot de passe est complètement masqué, Chrome le remplit automatiquement normalement. De plus, le z-index: -999 pourrait être utile afin qu'il ne chevauche aucun contenu.
cristiancastrodc

1
Fonctionne sur Chrome 67.0 sur le composant html angulaire<form *ngIf="!loggedIn()" #loginForm="ngForm" class="navbar-form navbar-right" (ngSubmit)="login()"><input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/><input type="text" #username="ngModel" placeholder="Username" class="form-control" required autocomplete="off" name="username" [(ngModel)]="model.username"><input type="password" #password="ngModel" placeholder="Password" class="form-control" required autocomplete="off" name="password" [(ngModel)]="model.password">...
Junior Mayhé

19

Voici mes solutions proposées, car Google insiste pour contourner tous les contournements que les gens semblent faire.

Option 1 - sélectionnez tout le texte en cliquant

Définissez les valeurs des entrées sur un exemple pour votre utilisateur (par exemple your@email.com), ou l'étiquette du champ (par exemple Email) et ajoutez une classe appelée focus-selectà vos entrées:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

Et voici la jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

Je ne vois vraiment pas Chrome jouer avec les valeurs. Ce serait fou. J'espère donc que c'est une solution sûre.

Option 2 - définissez la valeur de l'e-mail sur un espace, puis supprimez-la

En supposant que vous avez deux entrées, telles que l'e-mail et le mot de passe, définissez la valeur du champ e-mail sur " "(un espace) et ajoutez l'attribut / la valeur autocomplete="off", puis effacez-le avec JavaScript. Vous pouvez laisser la valeur du mot de passe vide.

Si l'utilisateur n'a pas JavaScript pour une raison quelconque, assurez-vous de couper son entrée côté serveur (vous devriez probablement l'être de toute façon), au cas où il ne supprimerait pas l'espace.

Voici le jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

J'ai défini un délai d'attente 15car il 5semblait fonctionner occasionnellement dans mes tests, donc tripler ce nombre semble être une valeur sûre.

Si vous ne définissez pas la valeur initiale sur un espace, Chrome laisse l'entrée en jaune, comme s'il l'avait remplie automatiquement.

Option 3 - entrées cachées

Mettez ceci au début du formulaire:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Assurez-vous de conserver la note HTML afin que vos autres développeurs ne la suppriment pas! Assurez-vous également que le nom de l'entrée masquée est pertinent.


@Vaia - avez-vous essayé de naviguer vers une autre page puis d'appuyer sur le bouton de retour? J'obtiens des résultats mitigés - cela peut nécessiter des ajustements.
rybo111

Je n'ai pas essayé l'option 1 si vous voulez dire cela. De plus, j'avais juste besoin de désactiver le remplissage automatique sur un modal chargé en ajax qui ne sera pas appelé avec le bouton de retour. Mais s'il y aura d'autres résultats, je vous le dirai. @ rybo111
AlexioVay

@Vaia, je voulais dire l'option 2 - veuillez répondre ici si vous rencontrez des problèmes. Merci.
rybo111

15

Utilisez css text-security: disc sans utiliser type = mot de passe .

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

meilleure approche que j'ai trouvée jusqu'à présent! enfin, au moins pour Chrome 64: /
scipper

Pour mes fins, c'est parfait, merci! Chrome ne le remplit pas ou ne le remplit pas automatiquement, ne propose pas de l'enregistrer, et non seulement il est masqué de la vue mais aussi du presse-papiers - j'ai copié ce que j'avais tapé et collé dans le bloc-notes et je viens de recevoir "••• •••••••• ". Brillant!
Doug McLean

15

Dans certains cas, le navigateur continuera de suggérer des valeurs de saisie semi-automatique même si l'attribut de saisie semi-automatique est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. L'astuce pour forcer vraiment la non-autocomplétion consiste à affecter une chaîne aléatoire à l'attribut , par exemple:

autocomplete="nope"

RE: «comportement inattendu» Ce comportement est poussé par Google qui croit savoir mieux que les développeurs comment chaque page doit fonctionner. Parfois, je veux juste une entrée de mot de passe brute, sans fioritures.
Regular Joe

3
cette combinaison a finalement fonctionné pour moi: role = "presentation" autocomplete = "nope" testé sur Chrome version 64.0.3282.186 (version officielle) (64 bits). Quel cauchemard!
billy jean

2
La chaîne aléatoire fonctionne pour Chrome mais pas pour Firefox. Pour être complet, j'utilise à la fois "autocomplete = 'off-no-complete'" et définit l'attribut readonly avec un onfocus = "this.readOnly = false". Mon application est une appliation d'entreprise que les utilisateurs utilisent pour saisir des milliers d'adresses, donc le cas d'utilisation pour contrôler cela est réel - je peux également garantir l'utilisation de Javascript, donc au moins je l'ai pour moi
ChronoFish

13

J'ai trouvé que l'ajout d'un formulaire empêche Chrome d'utiliser la saisie automatique.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Trouvé ici. https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Vraiment décevant que Chrome ait décidé qu'il savait mieux que le développeur quand effectuer la saisie semi-automatique. A une vraie sensation Microsoft.


Ce n'est pas vraiment le fait que vous disiez PreventChromeAutocomplete. J'ai pu obtenir la saisie semi-automatique au travail en disant autocomplete = "off" et name = "somename". Mais cela ne fonctionne que si vous nommez deux entrées différentes du même nom. Donc, dans votre cas, PreventChromeAutocomplete doit avoir été appliqué à deux entrées différentes. Très étrange ...
Joe Heyming

11
<input readonly onfocus="this.removeAttribute('readonly');" type="text">

l'ajout d'un attribut en lecture seule à la balise avec l'événement onfocus le supprimant résout le problème


Cette solution fonctionne sur les champs de texte
Denis Slonovschi

9

Pour les combinaisons de mots de passe de nom d'utilisateur, c'est un problème facile à résoudre. L'heuristique Chrome recherche le modèle:

<input type="text">

suivi par:

<input type="password">

Brisez simplement ce processus en invalidant ceci:

<input type="text">
<input type="text" onfocus="this.type='password'">

Malheureusement, cela s'applique à plus que des choses de type nom d'utilisateur / mot de passe. Chrome examinera le texte de l'espace réservé pour en déduire quoi suggérer. Par exemple: jsbin.com/jacizu/2/edit
kentcdodds

Il est valide que vous pourrez toujours remplir les champs avec des suggestions de navigateur, comme le montre votre exemple, donc cela ne résout pas vraiment le problème des PO. Cette solution empêche simplement le navigateur de remplir "automatiquement" les combinaisons de nom d'utilisateur et de mot de passe comme dans l'exemple par la réponse du haut. Cela peut être utile à certains, mais ce n'est pas une solution définitive pour simplement désactiver la saisie semi-automatique, qui devra provenir de Google.
Bernesto

4
Bien que, si vous ajoutez un espace devant le texte de votre espace réservé, cela désactivera également la suggestion automatique basée sur l'espace réservé. Certainement un hack, mais pas plus que les autres suggestions. jsbin.com/pujasu/1/edit
Bernesto

en fait ... cela semblait fonctionner pour votre exemple, mais pour une raison quelconque, cela ne fonctionne pas pour moi :-(
kentcdodds

Ha! C'est pourquoi cela s'appelle un hack ... Avez-vous un exemple que vous pouvez partager là où cela ne fonctionne pas?
Bernesto

8

Mike Nelsons a fourni une solution qui ne fonctionnait pas pour moi dans Chrome 50.0.2661.102 m. Ajouter simplement un élément d'entrée du même type avec affichage: aucun ensemble ne désactive plus la saisie automatique du navigateur natif. Il est maintenant nécessaire de dupliquer l'attribut de nom du champ de saisie sur lequel vous souhaitez désactiver la saisie semi-automatique.

De plus, pour éviter la duplication du champ de saisie lorsqu'ils se trouvent dans un élément de formulaire, vous devez placer un désactivé sur l'élément qui n'est pas affiché. Cela empêchera cet élément d'être soumis dans le cadre de l'action de formulaire.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

Comme pour juin 2016 et Chrome 51.0.2704.106 m, c'est la seule solution qui fonctionne ici
Denis

Mais le formulaire sélectionnera-t-il alors le bon champ de saisie (visible) dont vous avez besoin? Parce que c'est le même nom.
AlexioVay

@Vaia, l'ajout de l'attribut désactivé à l'élément en double l'empêchera d'être soumis.
mccainz

8

En 2016, Google Chrome a commencé à ignorer, autocomplete=offbien qu'il soit dans le W3C. La réponse qu'ils ont postée :

La partie délicate ici est que quelque part le long du parcours du Web, la saisie semi-automatique = désactivée devient une valeur par défaut pour de nombreux champs de formulaire, sans que l'on se demande vraiment si cela était bon pour les utilisateurs. Cela ne signifie pas qu'il n'y a pas de cas très valables où vous ne voulez pas que les données de remplissage automatique du navigateur (par exemple sur les systèmes CRM), mais dans l'ensemble, nous les considérons comme des cas minoritaires. Et en conséquence, nous avons commencé à ignorer la saisie semi-automatique = désactivée pour les données de remplissage automatique de Chrome.

Ce qui dit essentiellement: nous savons mieux ce que veut un utilisateur.

Ils ont ouvert un autre bogue pour publier des cas d'utilisation valides lorsque l'autocomplete = off est requis

Je n'ai pas vu de problèmes liés à la saisie semi-automatique dans toutes mes applications B2B, mais uniquement avec la saisie d'un type de mot de passe.

Le remplissage automatique intervient s'il y a un champ de mot de passe à l'écran, même caché. Pour briser cette logique, vous pouvez mettre chaque champ de mot de passe sous sa propre forme s'il ne casse pas votre propre logique de page.

<input type=name >

<form>
    <input type=password >
</form>

4
Étant donné que votre réponse est la plus récente, pourriez-vous ajouter que l'ajout autocomplete="pineapple"ou un autre charabia semble également résoudre le problème? Du moins, ça l'a fait de mon côté!
Douwe de Haan

1
@DouwedeHaan c'est bien jusqu'à ce que le formulaire soit enregistré, puis la saisie semi-automatique fournira des recommandations pour le champ "ananas" enregistré. Mais peut-être que l'utilisation d'un hachage aléatoire pour la valeur de saisie semi-automatique par exemple contournerait cela?
digout

@digout je suis d'accord. Un bon exemple serait d'utiliser l'UUID pour ce genre de choses. Assurez-vous simplement que la chaîne est unique!
Douwe de Haan

7

Si vous rencontrez des problèmes avec la conservation des espaces réservés mais la désactivation de la fonction de remplissage automatique de Chrome, j'ai trouvé cette solution de contournement.

Problème

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

L'exemple ci-dessus génère toujours le problème de remplissage automatique, mais si vous utilisez le required="required"CSS et certains, vous pouvez répliquer les espaces réservés et Chrome ne récupérera pas les balises.

Solution

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/


C'est la seule solution qui fonctionne réellement. Je n'aime vraiment pas ça, mais c'est l'état minable dans lequel nous sommes en ce moment :-(
kentcdodds

En 2017, celui-ci fonctionne toujours bien. Il a juste besoin de ce script pour forcer le inputfocus si l'utilisateur clique sur l'espace réservé "faux": $("label").on("click",function(){ $(this).prev().focus(); });Notez que le labelne peut pas être avant que le input... Chrome le trouve! Belle solution créative! +1
Louys Patrice Bessette

7

Je n'aimais vraiment pas créer des champs cachés, je pense que le faire comme ça deviendra vraiment déroutant très rapidement.

Sur les champs de saisie que vous souhaitez arrêter de compléter automatiquement, cela fonctionnera. Rendre les champs en lecture seule et sur focus supprimer cet attribut comme celui-ci

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

ce que cela signifie, c'est que vous devez d'abord supprimer l' attribut en lecture seule en sélectionnant le champ et à ce moment-là, vous serez probablement renseigné avec votre propre entrée utilisateur et en vous baissant la saisie automatique pour prendre le relais


1
Malheureusement, cela ne fonctionne plus :-( jsbin.com/sobise/edit?html,css,output
kentcdodds

7

Les valeurs précédemment saisies mises en cache par Chrome s'affichent sous forme de liste déroulante. Cela peut être désactivé par la saisie semi-automatique = désactivé, l'adresse explicitement enregistrée dans les paramètres avancés de Chrome donne une fenêtre contextuelle de remplissage automatique lorsqu'un champ d'adresse devient actif.Cela peut être désactivé par la saisie semi-automatique = "false" Mais cela permettra à Chrome d'afficher les valeurs mises en cache dans la liste déroulante.

Sur un champ html en entrée, les deux seront désactivés.

Role="presentation" & autocomplete="off"

Lors de la sélection des champs de saisie pour le remplissage automatique des adresses, Chrome ignore les champs de saisie qui n'ont pas d'élément html d'étiquette précédent.

Pour garantir que l'analyseur Chrome ignore un champ de saisie pour le popup d'adresse automatique, un bouton caché ou un contrôle d'image peut être ajouté entre l'étiquette et la zone de texte. Cela interrompra la séquence d'analyse chrome de la création de paires étiquette-entrée pour le remplissage automatique. Les cases à cocher sont ignorées lors de l'analyse des champs d'adresse

Chrome considère également l'attribut "for" sur l'élément d'étiquette. Il peut être utilisé pour interrompre la séquence d'analyse de Chrome.


Je t'aime. La seule solution sur cette page qui fonctionne réellement.
Jour Davis Waterbury

Ne fonctionne pas en l'an 2020.
Kai Noack

7

Eh bien, puisque nous avons tous ce problème, j'ai investi un peu de temps pour écrire une extension jQuery fonctionnelle pour ce problème. Google doit suivre le balisage html, pas nous suivons Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Ajoutez simplement ceci à un fichier comme /js/jquery.extends.js et incluez-le après jQuery. Appliquez-le à chaque élément du formulaire lors du chargement du document comme ceci:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle avec tests


6

Essayez le jQuerycode suivant qui a fonctionné pour moi.

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

awesome awesome solutions
DKR

Vous pouvez simplement ajouter autocomplete="off"au champ de saisie au lieu d'utiliser jquery. Et d'ailleurs, cela ne fonctionne pas. Des suggestions de mots de passe Chrome s'affichent toujours.
Kai Noack

6

Il y a deux morceaux à cela. Chrome et les autres navigateurs se souviendront des valeurs saisies précédemment pour les noms de champ et fourniront une liste de saisie semi-automatique à l'utilisateur sur cette base (notamment, les entrées de type de mot de passe ne sont jamais mémorisées de cette manière, pour des raisons assez évidentes). Vous pouvez ajouter autocomplete="off"pour empêcher cela sur des choses comme votre champ de messagerie.

Cependant, vous avez alors des remplisseurs de mot de passe. La plupart des navigateurs ont leurs propres implémentations intégrées et il existe également de nombreux utilitaires tiers qui fournissent cette fonctionnalité. Ça, tu ne peux pas t'arrêter. Il s'agit de l'utilisateur qui fait son propre choix pour enregistrer ces informations afin de les remplir automatiquement plus tard, et il est complètement en dehors de la portée et de la sphère d'influence de votre application.


La première partie de cette réponse ne semble plus être vraie: Chrome Bug
Joshua Drake

Je ne sais pas de quoi tu parles. Ce "bug" n'est qu'un espace réservé à Chromium pour collecter les cas d'utilisation des utilisateurs autocomplete="off". Il est possible que l'intention soit de le supprimer, mais ce n'est jamais explicitement indiqué, et il n'y a certainement rien qui nécessite ce saut mental. Ils peuvent simplement vouloir envisager des façons alternatives ou meilleures de le traiter. Quoi qu'il en soit, cela fait toujours partie de la spécification, et encore une fois, rien n'indique qu'il quittera la spécification non plus. Et, à ma connaissance, cela fonctionne toujours dans tous les navigateurs, y compris Chrome.
Chris Pratt

Nous avons quelques cas où la saisie semi-automatique = "off" n'est pas respectée par Chrome.
Joshua Drake

1. Quelques cas anecdotiques ne constituent pas des preuves. 2. Comme je l'ai dit dans ma réponse, les extensions de remplissage de formulaire et autres peuvent ne pas respecter et souvent ne pas respecter cela. En fin de compte, comme toutes choses, c'est au client, et donc à l'utilisateur. Tout ce que vous pouvez faire est de suggérer qu'il ne doit pas être rempli automatiquement.
Chris Pratt

6

Selon le rapport de bogue Chromium # 352347, Chrome ne respecte plus autocomplete="off|false|anythingelse", ni sur les formulaires ni sur les entrées.

La seule solution qui a fonctionné pour moi a été d' ajouter un champ de mot de passe factice :

<input type="password" class="hidden" />
<input type="password" />

6

En définissant autocompletesur offdevrait fonctionner ici, j'ai un exemple qui est utilisé par Google dans la page de recherche. J'ai trouvé cela à partir de l'élément inspect.

entrez la description de l'image ici

modifier : Si cela offne fonctionne pas, essayez falseou nofill. Dans mon cas, cela fonctionne avec la version 48.0 de Chrome


5

Voici un hack sale -

Vous avez votre élément ici (en ajoutant l'attribut désactivé):

<input type="text" name="test" id="test" disabled="disabled" />

Et puis au bas de votre page Web mettez du JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

5

Solution différente, basée sur le webkit. Comme déjà mentionné, chaque fois que Chrome trouve un champ de mot de passe, il complète automatiquement l'e-mail. AFAIK, ceci indépendamment de la saisie semi-automatique = [peu importe].

Pour contourner cela, changez le type d'entrée en texte et appliquez la police de sécurité du kit Web sous la forme que vous souhaitez.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

D'après ce que je peux voir, c'est au moins aussi sûr que type d'entrée = mot de passe, c'est un copier-coller sécurisé. Cependant, il est vulnérable en supprimant le style qui supprimera les astérisques, bien sûr, type d'entrée = mot de passe peut facilement être changé en type d'entrée = texte dans la console pour révéler tous les mots de passe remplis automatiquement, donc c'est vraiment la même chose.


Je vous remercie! C'est la seule chose qui fonctionne dans le chrome 49. Les méthodes précédentes se sont cassées car le chrome semble remplir toutes les entrées type="password"maintenant.
epelc

4

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

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

4

J'ai rencontré le même problème. Et voici la solution pour désactiver le remplissage automatique du nom d'utilisateur et du mot de passe sur Chrome (juste testé avec Chrome uniquement)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">

correction étrange mais en quelque sorte c'est la seule chose qui fonctionne pour moi sur le chrome 48 :)
Jacka
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.