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?
la source
Réponses:
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-address
dans 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 queautocomplete="no"
cela semble fonctionner, maisautocomplete="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 desautocomplete
noms 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.
la source
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. 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:
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:none
signifient 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):
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:
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 leposition: 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"
la source
autocomplete="I told you I wanted this off, Google. But you would not listen."
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"
utilisationautocomplete="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»:
la source
Parfois même,
autocomplete=off
cela 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:
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:
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?
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.
la source
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?Si vous implémentez une fonctionnalité de zone de recherche, essayez de définir l'
type
attributsearch
comme suit:Cela fonctionne pour moi sur Chrome v48 et semble être un balisage légitime:
https://www.w3.org/wiki/HTML/Elements/input/search
la source
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
password
terrain.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:
J'espère que cela aidera quelqu'un.
la source
password
et d'avoiractual_password
pour le champ légitime, car Google semble maintenant regarder lename
. Cependant, cela signifie que Chrome n'enregistrera pas le mot de passe, qui est la fonctionnalité que je souhaite réellement . AAAAARRRRGHH!Je ne sais pas pourquoi, mais cela m'a aidé et a fonctionné pour moi.
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 .
la source
Pour moi, simple
L'a fait.
Testé sur plusieurs versions, le dernier essai a eu lieu le 56.0.2924.87
la source
Vous devez ajouter cet attribut:
Lien source: article complet
la source
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 ouvertesi 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 ouverteVous devez masquer l'élément factice sans utiliser css, utilisez
display:none
donc essentiellement ce qui suit comme élément de mot de passe factice.la source
<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">...
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
[email protected]
), ou l'étiquette du champ (par exempleEmail
) et ajoutez une classe appeléefocus-select
à vos entrées:Et voici la jQuery:
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 valeurautocomplete="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:
J'ai défini un délai d'attente
15
car il5
semblait 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:
CSS:
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.
la source
Utilisez css text-security: disc sans utiliser type = mot de passe .
html
css
la source
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:
la source
J'ai trouvé que l'ajout d'un formulaire empêche Chrome d'utiliser la saisie automatique.
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.
la source
l'ajout d'un attribut en lecture seule à la balise avec l'événement onfocus le supprimant résout le problème
la source
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:
suivi par:
Brisez simplement ce processus en invalidant ceci:
la source
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.
la source
En 2016, Google Chrome a commencé à ignorer,
autocomplete=off
bien qu'il soit dans le W3C. La réponse qu'ils ont postée :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.
la source
autocomplete="pineapple"
ou un autre charabia semble également résoudre le problème? Du moins, ça l'a fait de mon côté!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
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
CSS
http://jsfiddle.net/mwshpx1o/1/
la source
input
focus si l'utilisateur clique sur l'espace réservé "faux":$("label").on("click",function(){ $(this).prev().focus(); });
Notez que lelabel
ne peut pas être avant que leinput
... Chrome le trouve! Belle solution créative! +1Je 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
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
la source
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.
la source
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
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:
jsfiddle avec tests
la source
Essayez le
jQuery
code suivant qui a fonctionné pour moi.la source
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.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 source
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.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 :
la source
En définissant
autocomplete
suroff
devrait 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.modifier : Si cela
off
ne fonctionne pas, essayezfalse
ounofill
. Dans mon cas, cela fonctionne avec la version 48.0 de Chromela source
Voici un hack sale -
Vous avez votre élément ici (en ajoutant l'attribut désactivé):
Et puis au bas de votre page Web mettez du JavaScript:
la source
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.
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.
la source
type="password"
maintenant.La seule façon qui fonctionne pour moi était: (jQuery requis)
la source
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)
la source