J’ai créé une application Web qui utilise une liste déroulante de tagbox. Cela fonctionne très bien dans tous les navigateurs, à l’exception du navigateur Chrome (version 21.0.1180.89).
Malgré les champs de input
ET le champ de form
ayant l’atsortingbut autocomplete="off"
, Chrome insiste pour afficher un historique déroulant des entrées précédentes pour le champ, ce qui efface la liste de tagbox.
METTRE À JOUR
Il semble maintenant que Chrome ignore le style="display: none;"
ou style="visibility: hidden;
atsortingbuts.
Vous pouvez le changer pour quelque chose comme:
D’après mon expérience, Chrome ne remplit que le premier et le
précédent. J’ai donc ajouté:
En haut du
et le cas a été résolu.
Empêcher l’autocomplétion du nom d’utilisateur (ou de l’email) et du mot de passe:
Empêcher l’autocomplétion d’un champ ( peut ne pas fonctionner ):
Explication:
autocomplete
fonctionne toujours sur une malgré l’
autocomplete="off"
, mais vous pouvez passer à une chaîne aléatoire, comme nope
.
Autres “solutions” pour désactiver l’autocomplétion d’un champ (ce n’est pas la bonne façon de le faire, mais ça marche):
1.
HTML:
JS (onload):
(function() { var some_id = document.getElementById('some_id'); some_id.type = 'text'; some_id.removeAtsortingbute('autocomplete'); })();
ou en utilisant jQuery:
$(document).ready(function() { var some_id = $('#some_id'); some_id.prop('type', 'text'); some_id.removeAttr('autocomplete'); });
2.
HTML:
JS (onload):
(function() { var input = document.createElement('INPUT'); input.type = 'text'; document.getElementById('form').appendChild(input); })();
ou en utilisant jQuery:
$(document).ready(function() { $('', { type: 'text' }).appendTo($('#form')); });
Pour append plus d’un champ en utilisant jQuery:
function addField(label) { var div = $(''); var input = $('', { type: 'text' }); if(label) { var label = $('
Il semble que Chrome ignore maintenant autocomplete="off"
moins qu’il ne se trouve sur la
.
Pour une solution de contournement fiable, vous pouvez append ce code à votre page de disposition:
Chrome respecte autocomplete = off uniquement lorsqu’il y a au moins un autre élément d’entrée dans le formulaire avec une autre valeur de saisie semi-automatique.
Cela ne fonctionnera pas avec les champs de mot de passe – ceux-ci sont traités très différemment dans Chrome. Voir https://code.google.com/p/chromium/issues/detail?id=468153 pour plus de détails.
MISE À JOUR: Bug fermé comme “Won’t Fix” par Chromium Team 11 mars 2016. Voir le dernier commentaire dans mon rapport de bogue initialement déposé , pour une explication complète. TL; DR: utilise des atsortingbuts de saisie semi-sémantique tels que autocomplete = “new-street-address” pour éviter le remplissage automatique de Chrome.
Il vous suffit de faire votre entrée en readonly
et de la supprimer. C’est une approche très simple et les navigateurs ne renseigneront pas les entrées en readonly
. Par conséquent, cette méthode est acceptée et ne sera jamais remplacée par les futures mises à jour du navigateur.
Adaptez votre saisie en conséquence pour qu’elle ne ressemble pas à une entrée en readonly
input[readonly] { cursor: text; background-color: #fff; }
EXEMPLE DE TRAVAIL
Chrome version 34 ignore maintenant la autocomplete=off
– autocomplete=off
, voir ceci .
Beaucoup de discussions pour savoir si c’est une bonne ou une mauvaise chose? Quel est votre sharepoint vue?
La solution actuelle consiste à utiliser type="search"
. Google n’applique pas le remplissage automatique aux entrées avec un type de recherche.
Voir: https://twitter.com/Paul_Kinlan/status/596613148985171968
Mise à jour 04/04/2016: On dirait que c’est corrigé! Voir http://codereview.chromium.org/1473733008
Eh bien, un peu tard pour la fête, mais il semble y avoir un peu de malentendu sur la façon dont l’ autocomplete
devrait et ne devrait pas fonctionner. Selon les spécifications HTML, l’agent utilisateur (dans ce cas, Chrome) peut remplacer la autocomplete
– autocomplete
:
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-atsortingbute
Un agent utilisateur peut autoriser l’utilisateur à remplacer le nom du champ de saisie automatique d’un élément, par exemple pour le désactiver de “off” à “on” pour permettre aux valeurs d’être mémorisées valeurs. Cependant, les agents utilisateurs ne doivent pas autoriser les utilisateurs à ignorer le nom de la zone de remplissage automatique de “off” à “on” ou d’autres valeurs, car des implications de sécurité significatives pour l’utilisateur sont conservées, quelles que soient les préférences du site.
Donc, dans le cas de Chrome, les développeurs ont essentiellement dit “nous laisserons cela à l’utilisateur pour décider dans ses préférences s’il veut que la autocomplete
– autocomplete
fonctionne ou non. Si vous ne le voulez pas, ne l’activez pas dans votre navigateur. “.
Cependant, il semble que ce soit un peu trop zélé de ma part à mon goût, mais c’est comme ça. La spécification aborde également les implications potentielles pour la sécurité d’un tel déménagement:
Le mot-clé “off” indique soit que les données d’entrée du contrôle sont particulièrement sensibles (par exemple, le code d’activation d’une arme nucléaire); ou que c’est une valeur qui ne sera jamais réutilisée (par exemple, une clé unique pour une connexion bancaire) et que l’utilisateur devra donc saisir explicitement les données à chaque fois, au lieu de pouvoir compter sur l’UA pour pré-remplir la valeur pour lui; ou que le document fournit son propre mécanisme d’auto-complétion et ne souhaite pas que l’agent utilisateur fournisse des valeurs d’auto-complétion.
Donc, après avoir connu la même frustration que tout le monde, j’ai trouvé une solution qui fonctionne pour moi. Il est similaire à l’ autocomplete="false"
answers.
Un article de Mozilla parle exactement de ce problème:
Dans certains cas, le navigateur continuera à suggérer des valeurs d’auto-complétion même si l’atsortingbut autocomplete est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. L’astuce pour forcer le non-achèvement est d’atsortingbuer une chaîne aléatoire à l’atsortingbut
Le code suivant devrait donc fonctionner:
autocomplete="nope"
Et ainsi devrait chacun des suivants:
autocomplete="false" autocomplete="foo" autocomplete="bar"
Le problème que je vois est que l’agent de navigateur peut être assez intelligent pour apprendre l’atsortingbut autocomplete
et l’appliquer la prochaine fois qu’il voit le formulaire. Si c’est le cas, le seul moyen de contourner le problème serait de modifier dynamicment la valeur de l’atsortingbut autocomplete
lorsque la page est générée.
Un point mérite d’être mentionné: de nombreux navigateurs ignorent les parameters de autocomplete
pour les champs de connexion (nom d’utilisateur et mot de passe). Comme le dit l’article de Mozilla:
Pour cette raison, de nombreux navigateurs modernes ne prennent pas en charge autocomplete = “off” pour les champs de connexion.
- Si un site définit autocomplete = “off” pour un formulaire et que le formulaire inclut des champs de saisie de nom d’utilisateur et de mot de passe, le navigateur proposera toujours de se souvenir de cette connexion et si l’utilisateur accepte, le navigateur remplira automatiquement ces champs la prochaine fois L’utilisateur visite cette page.
- Si un site définit autocomplete = “off” pour les champs de saisie du nom d’utilisateur et du mot de passe, le navigateur proposera toujours de se souvenir de cette connexion, et si l’utilisateur accepte, le navigateur remplira automatiquement ces champs lors de sa prochaine visite.
C’est le comportement dans Firefox (depuis la version 38), Google Chrome (depuis 34) et Internet Explorer (depuis la version 11).
Enfin, un petit renseignement pour savoir si l’atsortingbut appartient à l’élément de form
ou à l’élément d’ input
. La spécification a encore la réponse:
Si l’atsortingbut autocomplete est omis, la valeur par défaut correspondant à l’état de l’atsortingbut autocomplete du propriétaire du formulaire de l’élément est utilisée à la place (“on” ou “off”). S’il n’y a pas de propriétaire de formulaire, la valeur “on” est utilisée.
Alors. Le mettre sur le formulaire doit s’appliquer à tous les champs de saisie. Le placer sur un élément individuel devrait s’appliquer uniquement à cet élément (même s’il n’y en a pas sur le formulaire). Si la autocomplete
– autocomplete
n’est pas définie du tout, elle est activée par défaut.
Résumé
Pour désactiver la autocomplete
sur tout le formulaire:
Ou si vous devez dynamicment le faire:
Pour désactiver la autocomplete
sur un élément individuel (quel que soit le paramètre de formulaire présent ou non)
Ou si vous devez dynamicment le faire:
Et rappelez-vous que certains agents utilisateurs peuvent remplacer vos tentatives les plus difficiles pour désactiver la autocomplete
.
Le navigateur ne se soucie pas de la saisie semi-automatique = désactivée automatiquement ou remplit même les informations d’identification sur un champ de texte erroné?
Je l’ai corrigé en définissant le champ de mot de passe sur lecture seule et en l’activant, lorsque l’utilisateur clique dessus ou utilise une touche de tabulation pour ce champ.
correction automatique du navigateur: readonly et set writeble on focus (au clic de la souris et à la tabulation des champs)
Mise à jour: Mobile Safari définit le curseur dans le champ, mais n’affiche pas le clavier virtuel. New Fix fonctionne comme avant mais gère le clavier virtuel:
Démo en direct https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
En passant, plus d’informations sur mon observation:
Parfois, je remarque ce comportement étrange sur Chrome et Safari, quand il y a des champs de mot de passe dans le même formulaire. 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 textlike-input le plus proche, qui apparaît avant le champ du mot de passe dans DOM (en devinant simplement à cause de l’observation). Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler, même une saisie semi-automatique = off n’empêche pas de renseigner les informations d’identification dans des champs incorrects, mais pas les champs d’utilisateur ou de pseudonyme.
Vous pouvez utiliser autocomplete="new-password"
Travaille dans:
à quiconque cherche une solution à cela, je finis par comprendre.
Chrome ne respecte que l’autocomplete = “off” si la page est une page HTML5 (j’utilisais XHTML).
J’ai converti ma page en HTML5 et le problème a disparu (facepalm).
Vu chrome ignorer l’ autocomplete="off"
, je le résous avec une méthode stupide qui utilise “fake input” pour tromper chrome pour le remplir au lieu de remplir le “vrai”.
Exemple:
Chrome remplira la “fausse entrée” et, une fois soumis, le serveur prendra la valeur “entrée réelle”.
Je publie cette réponse pour apporter une solution actualisée à ce problème. J’utilise actuellement Chrome 49 et aucune réponse donnée ne fonctionne pour celui-ci. Je recherche également une solution compatible avec les autres navigateurs et les versions précédentes.
Mettez ce code au début de votre formulaire
Ensuite, pour votre vrai mot de passe, utilisez
Commentez cette réponse si elle ne fonctionne plus ou si vous rencontrez un problème avec un autre navigateur ou une autre version.
Approuvé sur:
Jusqu’à la semaine dernière, les deux solutions ci-dessous semblaient fonctionner pour Chrome, IE et Firefox. Mais avec la sortie de Chrome version 48 (et toujours dans 49), ils ne fonctionnent plus:
Ce qui suit dans l’élément de saisie de mot de passe:
autocomplete = “off”
Donc, pour résoudre ce problème rapidement, j’ai d’abord essayé d’utiliser un hack majeur pour définir l’élément de saisie du mot de passe sur désactivé, puis j’ai utilisé un setTimeout dans la fonction de document prêt pour l’activer à nouveau.
setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);
Mais cela semblait tellement fou et j’ai fait quelques recherches supplémentaires et j’ai trouvé la réponse de @tibalts dans Désactiver la saisie automatique de Chrome . Sa réponse est d’utiliser autocomplete = “new-password” dans la saisie des mots de passe et cela semble fonctionner sur tous les navigateurs (j’ai gardé mon numéro de correctif 1 ci-dessus à ce stade).
Voici le lien dans la discussion des développeurs Google Chrome: https://code.google.com/p/chromium/issues/detail?id=370363#c7
Au lieu de autocomplete = “off”, utilisez autocomplete = “false” 😉
à partir de: https://stackoverflow.com/a/29582380/75799
autocomplete=off
est largement ignoré dans les navigateurs modernes, principalement à cause des gestionnaires de mots de passe, etc.
Vous pouvez essayer d’append cette autocomplete="new-password"
qui n’est pas totalement supporté par tous les navigateurs, mais cela fonctionne sur certains
À partir de Chrome 42, aucune des solutions / hacks de ce thread (à compter du 2015-05-21T12:50:23+00:00
) ne permet de désactiver la saisie semi-automatique pour un champ individuel ou pour le formulaire entier.
EDIT: J’ai trouvé que vous n’aviez besoin d’insérer qu’un seul champ de messagerie factice dans votre formulaire (vous pouvez le masquer avec un display: none
) avant les autres champs pour empêcher la saisie automatique. Je présume que le chrome stocke une sorte de signature de formulaire avec chaque champ auto-complété et que l’inclusion d’un autre champ de courrier électronique corrompt cette signature et empêche la saisie automatique.
La bonne nouvelle est que, puisque la “signature de formulaire” est corrompue par ceci, aucun des champs n’est auto-rempli, donc aucun JS n’est nécessaire pour effacer les faux champs avant la soumission.
Ancienne réponse:
La seule chose que j’ai trouvé encore viable est d’insérer deux champs factices de type email et mot de passe avant les champs réels. Vous pouvez les configurer pour display: none
pour les cacher (ce n’est pas assez intelligent pour ignorer ces champs):
Malheureusement, les champs doivent être dans votre formulaire (sinon, les deux ensembles d’entrées sont automatiquement remplis). Donc, pour que les champs fictifs soient vraiment ignorés, vous aurez besoin de JS pour qu’ils s’exécutent sur le formulaire afin de les effacer:
form.addEventListener('submit', function() { form.elements['fake_email'].value = ''; form.elements['fake_password'].value = ''; });
Notez que la suppression de la valeur avec Javascript permet de remplacer la saisie semi-automatique. Donc, si le bon comportement avec JS désactivé est acceptable, vous pouvez simplifier tout cela avec un “polyfill” à complétion automatique JS pour Chrome:
(function(document) { function polyfillAutocomplete(nodes) { for(var i = 0, length = nodes.length; i < length; i++) { if(nodes[i].getAttribute('autocomplete') === 'off') { nodes[i].value = ''; } } } setTimeout(function() { polyfillAutocomplete(document.getElementsByTagName('input')); polyfillAutocomplete(document.getElementsByTagName('textarea')); }, 1); })(window.document);
Après le chrome v. 34, le réglage autocomplete="off"
à la
ne fonctionne pas
J’ai fait les changements pour éviter ce comportement ennuyeux:
name
et l’ id
de la saisie du mot de passe passwordInput
) (Jusqu’à présent, Chrome ne mettra pas le mot de passe enregistré sur l’entrée, mais le formulaire est maintenant cassé)
Enfin, pour que le formulaire fonctionne, mettez ce code à exécuter lorsque l’utilisateur clique sur le bouton d’envoi ou chaque fois que vous souhaitez déclencher la soumission du formulaire:
var sI = $(".passwordInput")[0]; $(sI).attr("id", "password"); $(sI).attr("name", "password");
Dans mon cas, j’avais l’habitude d’avoir id="password" name="password"
dans la saisie du mot de passe, donc je les ai remis avant de déclencher la soumission.
Modifier l’atsortingbut de type d’entrée à type="search"
.
Google n’applique pas le remplissage automatique aux entrées avec un type de recherche.
Je viens de mettre à jour vers Chrome 49 et la solution de Diogo Cid ne fonctionne plus.
J’ai trouvé une solution de contournement différente en masquant et en supprimant les champs à l’exécution après le chargement de la page.
Chrome ignore désormais la solution de contournement d’origine en appliquant les informations d’identification au premier champ affiché type="password"
et son champ précédent type="text"
. J’ai donc masqué les deux champs à l’aide de la visibility: hidden;
CSS visibility: hidden;
.chromeHack-autocomplete { height: 0px !important; width: 0px !important; opacity: 0 !important; padding: 0 !important; margin: 0 !important; } jQuery(window).load(function() { $(".chromeHack-autocomplete").delay(100).hide(0, function() { $(this).remove(); }); });
Je sais que cela peut sembler pas très élégant mais ça marche.
Dans Chrome 48+, utilisez cette solution:
Mettez de faux champs avant les champs réels:
Masquer les faux champs:
.visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; }
Tu l’as fait!
Cela fonctionnera aussi pour les anciennes versions.
J’ai trouvé cette solution la plus appropriée:
function clearChromeAutocomplete() { // not possible, let's try: if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) { document.getElementById('adminForm').setAtsortingbute('autocomplete', 'off'); setTimeout(function () { document.getElementById('adminForm').setAtsortingbute('autocomplete', 'on'); }, 1500); } }
Il doit être chargé après dom ready ou après le rendu du formulaire.
Bien que je pense que la saisie semi-automatique devrait être un choix de l’utilisateur, il y a des moments où Chrome est trop zélé (d’autres navigateurs peuvent l’être aussi). Par exemple, un champ de mot de passe avec un nom différent est toujours rempli automatiquement avec un mot de passe enregistré et le champ précédent rempli avec le nom d’utilisateur. Cela est particulièrement désagréable lorsque le formulaire est un formulaire de gestion des utilisateurs pour une application Web et que vous ne voulez pas que le remplissage automatique le remplisse avec vos propres informations d’identification.
Chrome ignore complètement autocomplete = “off” maintenant. Bien que les hacks de JS puissent bien fonctionner, j’ai trouvé un moyen simple qui fonctionne au moment de la rédaction:
Définissez la valeur du champ mot de passe sur le caractère de contrôle 8 ( "\x08"
dans PHP ou dans HTML). Cela empêche Chrome de remplir automatiquement le champ car il a une valeur, mais aucune valeur réelle n’est entrée car il s’agit du caractère de retour arrière.
Oui, c’est toujours un hack, mais ça marche pour moi. YMMV.
J’ai résolu d’une autre manière. Vous pouvez essayer ceci.
Après avoir essayé toutes les solutions, voici ce qui semble fonctionner pour la version chrome: 45, avec le champ contenant le mot de passe:
jQuery('document').ready(function(){ //For disabling Chrome Autocomplete jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000)); });
L’astuce de l’élément d’entrée masqué semble toujours fonctionner (Chrome 43) pour empêcher le remplissage automatique, mais il convient de garder à l’esprit que Chrome essaiera de se remplir automatiquement en fonction du marqueur d’espace réservé. Vous devez faire correspondre le paramètre fictif de l’élément d’entrée masqué à celui de l’entrée que vous essayez de désactiver.
Dans mon cas, j’avais un champ avec un texte d’espace réservé de «Ville ou Zip» que j’utilisais avec Google Place Autocomplete. Il est apparu qu’il essayait de remplir automatiquement comme s’il faisait partie d’un formulaire d’adresse. L’astuce n’a pas fonctionné tant que je n’ai pas placé le même espace réservé sur l’élément caché que sur l’entrée réelle:
J’ai eu un problème similaire où le champ de saisie prenait un nom ou un email. J’ai défini autocomplete = “off” mais Chrome a toujours forcé des suggestions. Il s’avère que c’est parce que le texte de l’espace réservé contenait les mots «nom» et «courriel».
Par exemple
Je l’ai contourné en mettant un espace de largeur zéro dans les mots de l’espace réservé. Fini l’autocomplétion du chrome.
On dirait que c’est corrigé! Voir https://codereview.chromium.org/1473733008
When using a widget like jQuery UI’s Autocomplete make sure to check that it is not adding/changing to autocomplete atsortingbute to off. I found this to be true when using it and will break any work you may have done to override any browser field caching. Make certain that you have a unique name atsortingbute and force a unique autocomplete atsortingbute after the widget initializes. See below for some hints on how that might work for your situation.
I’ve solved the endless fight with Google Chrome with the use of random characters.
Hope that it will help to other people.