Chrome ignore autocomplete = "off"
J'ai créé une application Web qui utilise une liste déroulante de boîtes aux lettres. Cela fonctionne très bien dans tous les navigateurs sauf le navigateur Chrome (version 21.0.1180.89).
Malgré les deux champs input ET le champ form possédant l'attribut autocomplete="off", Chrome insiste pour afficher un historique déroulant des entrées précédentes du champ, qui efface la liste de boîtes aux lettres.
METTRE À JOUR
Il semble maintenant que Chrome ignore les attributs style="display: none;" ou style="visibility: hidden;.
Vous pouvez le changer en quelque chose comme:
<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">
D'après mon expérience, Chrome complète uniquement le premier <input type="password"> et le précédent <input> J'ai donc ajouté:
<input style="display:none">
<input type="password" style="display:none">
Au sommet du <form> et le cas a été résolu.
Empêcher la saisie semi-automatique du nom d'utilisateur (ou email) et du mot de passe:
<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">
Empêcher la saisie semi-automatique d'un champ ( peut ne pas fonctionner ):
<input type="text" name="field" autocomplete="nope">
Explication:
autocomplete fonctionne toujours sur un <input>despite ayant autocomplete="off", mais vous pouvez changer off en une chaîne aléatoire, comme nope.
Autres "solutions" pour désactiver la saisie semi-automatique d'un champ (ce n'est pas la bonne façon de le faire, mais cela fonctionne):
1.
HTML:
<input type="password" id="some_id" autocomplete="new-password">
JS (onload):
(function() {
var some_id = document.getElementById('some_id');
some_id.type = 'text';
some_id.removeAttribute('autocomplete');
})();
ou en utilisant jQuery:
$(document).ready(function() {
var some_id = $('#some_id');
some_id.prop('type', 'text');
some_id.removeAttr('autocomplete');
});
2.
HTML:
<form id="form"></form>
JS (onload):
(function() {
var input = document.createElement('INPUT');
input.type = 'text';
document.getElementById('form').appendChild(input);
})();
ou en utilisant jQuery:
$(document).ready(function() {
$('<input>', {
type: 'text'
}).appendTo($('#form'));
});
Pour ajouter plusieurs champs à l'aide de jQuery:
function addField(label) {
var div = $('<div>');
var input = $('<input>', {
type: 'text'
});
if(label) {
var label = $('<label>', {
text: label
});
label.append(input);
div.append(label);
} else {
div.append(input);
}
div.appendTo($('#form'));
}
$(document).ready(function() {
addField();
addField('Field 1: ');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>Travaille dans:
Chrome: 49+
Firefox: 44+
Il semble que Chrome ignore maintenant autocomplete="off" s'il ne se trouve pas sur la balise <form autocomplete="off">.
Pour une solution de contournement fiable, vous pouvez ajouter ce code à votre page de présentation:
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
Chrome respecte autocomplete = off uniquement lorsqu'il existe au moins un autre élément d'entrée dans le formulaire avec une autre valeur de complétion 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: Le bogue a été fermé en tant que "ne résoudra pas" par l'équipe Chromium le 11 mars 2016. Voir le dernier commentaire dans le rapport de bogue initialement déposé , pour une explication complète. TL; DR: utilisez des attributs sémantiques autocomplete tels que autocomplete = "new-street-address" pour éviter que Chrome effectue le remplissage automatique.
Approche moderne
Faites simplement votre entrée readonly, et au focus, supprimez-la. C'est une approche très simple et les navigateurs ne peupleront pas les entrées readonly. Par conséquent, cette méthode est acceptée et ne sera jamais écrasée par les futures mises à jour du navigateur.
<input type="text" onfocus="this.removeAttribute('readonly');" readonly />
La prochaine partie est optionnelle. Style de votre entrée en conséquence afin qu'il ne ressemble pas à une entrée readonly.
input[readonly] {
cursor: text;
background-color: #fff;
}
La version 34 de Chrome ignore maintenant le autocomplete=off, voir ceci .
Beaucoup de discussions sur si c'est une bonne ou une mauvaise chose? Quel est votre avis?
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 réglé! Voir http://codereview.chromium.org/1473733008
Eh bien, un peu tard pour le parti, mais il semble y avoir un peu de malentendu sur la façon dont autocomplete devrait et ne devrait pas fonctionner. Selon les spécifications HTML, l'agent utilisateur (dans ce cas, Chrome) peut remplacer autocomplete:
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
Un agent d'utilisateur peut permettre à l'utilisateur de remplacer le nom de champ de remplissage automatique d'un élément, par ex. pour le changer de "off" à "on" afin de permettre aux valeurs d'être mémorisées et pré-remplies malgré les objections de l'auteur de la page, ou de toujours "off", ne mémorisant jamais de valeurs. Toutefois, les agents utilisateurs ne doivent pas autoriser les utilisateurs à remplacer trivialement le nom du champ de remplissage automatique de "désactivé" à "activé", car il existe des conséquences importantes pour la sécurité de l'utilisateur si toutes les valeurs sont toujours mémorisées, quelles que soient les préférences du site.
Ainsi, dans le cas de Chrome, les développeurs ont essentiellement déclaré "nous laisserons à l'utilisateur le soin de décider dans ses préférences s'il souhaite que autocomplete fonctionne ou non. Si vous ne le souhaitez pas, ne l'activez pas dans votre navigateur ".
Cependant, il semble que cela me paraisse un peu trop zélé, mais c'est comme ça. La spécification aborde également les implications potentielles d'un tel mouvement sur le plan de la sécurité:
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 qu’il s’agit d’une valeur qui ne sera jamais réutilisée (par exemple, une clé unique pour un identifiant bancaire) et l’utilisateur devra donc saisir explicitement les données à chaque fois, au lieu de pouvoir compter sur l’UA pour le préremplir la valeur pour lui; ou que le document fournit son propre mécanisme d'auto-complétion et ne veut pas que l'agent utilisateur fournisse des valeurs d'auto-complétion.
Ainsi, après avoir vécu la même frustration que tout le monde, j'ai trouvé une solution qui fonctionne pour moi. Cela ressemble aux réponses autocomplete="false".
Un article de Mozilla parle exactement de ce problème:
Dans certains cas, le navigateur continue à suggérer des valeurs de complétion automatique même si l'attribut autocomplete est défini sur off. Ce comportement inattendu peut être assez déroutant pour les développeurs. L'astuce pour vraiment forcer le non-achèvement est d'assigner une chaîne aléatoire à l'attribut
Donc le code suivant devrait fonctionne:
autocomplete="nope"
Et ainsi devrait chacun des éléments 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'attribut autocomplete et l'appliquer la prochaine fois qu'il verra le formulaire. Si cela se produit, la seule façon de contourner le problème serait de modifier de manière dynamique la valeur de l'attribut autocomplete lors de la génération de la page.
Un point à noter est que de nombreux navigateurs ignorent les paramètres 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 supportent pas autocomplete = "off" pour les champs de connexion.
- Si un site définit autocomplete = "off" pour un formulaire et que celui-ci comporte des 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, il 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 y consent, il remplira automatiquement ces champs lors de sa prochaine visite sur cette page.
C'est le comportement de Firefox (depuis la version 38), de Google Chrome (depuis 34) et d'Internet Explorer (depuis la version 11).
Enfin, quelques informations sur l'attribut correspondant à l'élément form ou à l'élément input. La spécification a encore la réponse:
Si l'attribut autocomplete est omis, la valeur par défaut correspondant à l'état de l'attribut autocomplete du propriétaire de la fiche de l'élément est utilisée ("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 devrait 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 autocomplete n'est pas défini du tout, sa valeur par défaut est on.
Résumé
Pour désactiver autocomplete sur tout le formulaire:
<form autocomplete="off" ...>
Ou si vous avez besoin dynamiquement de le faire:
<form autocomplete="random-string" ...>
Pour désactiver autocomplete sur un élément individuel (que le paramètre de formulaire soit présent ou non)
<input autocomplete="off" ...>
Ou si vous avez besoin dynamiquement de le faire:
<input autocomplete="random-string" ...>
Et rappelez-vous que certains agents utilisateurs peuvent annuler même vos tentatives les plus difficiles de désactiver autocomplete.
_ {Le navigateur ne se soucie pas de la complétion automatique = off auto ou même remplit les informations d'identification avec le mauvais champ de texte? _
Je l'ai corrigé en définissant le champ de mot de passe en lecture seule et en l'activant, lorsque l'utilisateur clique dessus ou utilise la touche de tabulation pour accéder à ce champ.
correction du remplissage automatique du navigateur dans: en lecture seule et définition de l'écriture en écriture sur le focus} (au clic de la souris et tabulation dans les champs)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
Mise à jour: Mobile Safari définit le curseur dans le champ, mais n'affiche pas le clavier virtuel. Le nouveau correctif 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
A propos, 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 cherche un champ de mot de passe pour insérer vos informations d'identification enregistrées. Puis il remplit automatiquement nom_utilisateur dans le champ de saisie textlike le plus proche, qui apparaît avant le champ mot de passe dans DOM (en devinant juste en raison de l'observation). Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler, parfois même l'auto-complétion = off n'empêcherait pas de renseigner les informations d'identification dans des champs incorrects, mais pas dans les champs utilisateur ou pseudonyme.
Vous pouvez utiliser autocomplete="new-password"
<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">
Travaille dans:
- Chrome: 53, 54, 55
- Firefox: 48, 49, 50
à quiconque cherche une solution à cela, je le découvre enfin.
Chrome ne respecte que l'auto-complétion = "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 ignore le autocomplete="off", je le résous avec une méthode stupide qui utilise "une fausse entrée" pour tricher le chrome afin de le remplir au lieu de remplir le "vrai".
Exemple:
<input type="text" name="username" style="display:none" value="fake input" />
<input type="text" name="username" value="real input"/>
Chrome remplira la "fausse entrée" et, lors de la soumission, le serveur prendra la valeur "entrée réelle".
Je poste cette réponse pour apporter une solution mise à jour à ce problème . J'utilise actuellement Chrome 49 et aucune réponse donnée ne fonctionne pour celui-ci . Je cherche également une solution fonctionnant avec d'autres navigateurs et versions antérieures.
Mettez ce code au début de votre formulaire
<div style="display: none;">
<input type="text" autocomplete="new-password">
<input type="password" autocomplete="new-password">
</div>
Ensuite, pour votre vrai mot de passe, utilisez
<input type="password" name="password" autocomplete="new-password">
Commentez cette réponse si cela ne fonctionne plus ou si vous rencontrez un problème avec un autre navigateur ou une autre version.
Approuvé le:
- Chrome: 49
- Firefox: 44, 45
- Bord: 25
- Internet Explorer: 11
Jusqu'à la semaine dernière, les deux solutions ci-dessous semblaient fonctionner pour Chrome, IE et Firefox. Mais avec la sortie de la version 48 de Chrome (et toujours en 49), ils ne fonctionnent plus:
- Ce qui suit en haut du formulaire:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
Les éléments suivants dans l'élément de saisie du mot de passe:
autocomplete = "off"
Donc, pour résoudre rapidement ce problème, j’ai d’abord essayé d’utiliser un hack important en définissant initialement l’élément d’entrée de mot de passe sur disabled, puis d’utiliser un setTimeout dans la fonction de préparation du document pour le réactiver.
setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);
Mais cela semblait tellement fou et j'ai fait quelques recherches supplémentaires et j'ai trouvé @tibalts répondre dans Désactivation de Chrome Autofill . 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 conservé mon correctif numéro 1 ci-dessus à ce stade).
Voici le lien dans la discussion entre 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 en grande partie ignoré par les navigateurs modernes - principalement à cause des gestionnaires de mots de passe, etc.
Vous pouvez essayer d’ajouter ce autocomplete="new-password" qui n’est pas totalement supporté par tous les navigateurs, mais il fonctionne sur certains
À partir de Chrome 42, aucune des solutions/piratages de ce fil de discussion (à partir de 2015-05-21T12:50:23+00:00) ne permet de désactiver la saisie semi-automatique pour un champ individuel ou pour l'intégralité du formulaire.
EDIT: J'ai constaté que vous n'aviez besoin d'insérer qu'un seul champ de courrier électronique factice dans votre formulaire (vous pouvez le masquer avec display: none) avant les autres champs pour empêcher la saisie automatique. Je présume que chrome stocke une sorte de signature de formulaire avec chaque champ de saisie semi-automatique et l'inclusion d'un autre champ de courrier électronique corrompt cette signature et empêche la saisie semi-automatique.
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>
La bonne nouvelle est que, puisque la "signature de formulaire" est corrompue, aucun des champs n'est autocomplété, de sorte qu'aucun JS n'est nécessaire pour effacer les faux champs avant la soumission.
Ancienne réponse:
La seule chose que je trouve encore viable consiste à insérer deux champs fictifs de type email et mot de passe avant les champs réels. Vous pouvez les définir sur display: none pour les cacher (il n'est pas assez intelligent pour ignorer ces champs):
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="password" name="fake_password" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>
Malheureusement, les champs doivent être dans votre formulaire (sinon les deux jeux d’entrées sont remplis automatiquement). Donc, pour que les faux champs soient vraiment ignorés, vous aurez besoin de JS pour pouvoir les effacer:
form.addEventListener('submit', function() {
form.elements['fake_email'].value = '';
form.elements['fake_password'].value = '';
});
Notez ci-dessus que supprimer la valeur avec Javascript permet de remplacer la saisie semi-automatique. Par conséquent, si le comportement correct avec JS désactivé est acceptable, vous pouvez le simplifier avec un "polyfill" JS autocomplete 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);
Autocomplete="Off" ne fonctionne plus.
Essayez d’utiliser une chaîne aléatoire au lieu de "Off", par exemple Autocomplete="NoAutocomplete".
J'espère que ça aide.
J'ai résolu le combat sans fin avec Google Chrome en utilisant des caractères aléatoires.
<input name="name" type="text" autocomplete="rutjfkde">
J'espère que cela aidera d'autres personnes.
Après le chrome v. 34, définir autocomplete="off" à <form> tag ne fonctionne pas
J'ai fait les changements pour éviter ce comportement ennuyeux:
- Supprimer la
nameet laidde la saisie du mot de passe - Mettez une classe dans l'entrée (ex:
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 l'envoi 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.
Je viens de mettre à jour Chrome 49 et la solution de Diogo Cid ne fonctionne plus.
J'ai créé une solution de contournement différente, masquant et supprimant les champs au moment de l'exécution après le chargement de la page.
Chrome ignore maintenant 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 CSSvisibility: hidden;
<!-- HTML -->
<form>
<!-- Fake fields -->
<input class="chromeHack-autocomplete">
<input type="password" class="chromeHack-autocomplete">
<input type="text" placeholder="e-mail" autocomplete="off" />
<input type="password" placeholder="Password" autocomplete="off" />
</form>
<!-- CSS -->
.chromeHack-autocomplete {
height: 0px !important;
width: 0px !important;
opacity: 0 !important;
padding: 0 !important; margin: 0 !important;
}
<!--JavaScript (jQuery) -->
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:
Placez les faux champs avant les vrais champs:
<form autocomplete="off"> <input name="fake_email" class="visually-hidden" type="text"> <input name="fake_password" class="visually-hidden" type="password"> <input autocomplete="off" name="email" type="text"> <input autocomplete="off" name="password" type="password"> </form>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.
Après avoir essayé toutes les solutions, voici ce qui semble fonctionner pour la version chrome: 45, le formulaire ayant le champ mot de passe:
jQuery('document').ready(function(){
//For disabling Chrome Autocomplete
jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
});
autocomplete="off" fonctionne maintenant, vous pouvez donc simplement procéder comme suit:
<input id="firstName2" name="firstName2" autocomplete="off">
Testé dans le Chrome 70 actuel ainsi que dans toutes les versions à partir de Chrome 62.
Démo .
UPDATE: Puisque les gens ont tendance à baisser la note (voir, par exemple, un commentaire de @AntonKuznetsov bas ci-dessous) avant de lire la démonstration dans JSFiddle ou de regarder dans le code HTML de JSFiddle, je dois exprimez-le clairement:
- la
inputsupérieure a l'auto-complétion qui fonctionne - le bas
inputa l'auto-complétion disabled en ajoutantautocomplete="off"
Changez l'attribut du type d'entrée en type="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.
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').setAttribute('autocomplete', 'off');
setTimeout(function () {
document.getElementById('adminForm').setAttribute('autocomplete', 'on');
}, 1500);
}
}
Il doit être chargé après le prêt ou après le rendu du formulaire.
Bien que je convienne que la saisie semi-automatique devrait être le choix de l'utilisateur, il arrive parfois que Google Chrome en fasse trop (d'autres navigateurs le sont peut-ê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 est rempli avec le nom d'utilisateur. Cela est particulièrement gênant lorsque le formulaire est un formulaire de gestion des utilisateurs pour une application Web et que vous ne souhaitez pas que le remplissage automatique le remplisse avec vos propres informations d'identification.
Chrome ignore complètement autocomplete = "off" maintenant. Alors que les piratages JS peuvent très bien fonctionner, j'ai trouvé un moyen simple qui fonctionne au moment de la rédaction:
Définissez la valeur du champ de mot de passe sur le caractère de contrôle 8 ("\x08" dans PHP ou  en 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 bidouillage, mais cela fonctionne pour moi. YMMV.
J'ai résolu d'une autre manière. Vous pouvez essayer ça.
<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){
setTimeout(function(){
$("input#passfld").attr("type","password");
},10);
});
// or in pure javascript
window.onload=function(){
setTimeout(function(){
document.getElementById('passfld').type = 'password';
},10);
}
</script>
J'ai eu un problème similaire où le champ de saisie prenait un nom ou un email. Je règle autocomplete = "off" mais Chrome imposait toujours les suggestions. Il s'avère que c'était parce que le texte de remplacement contenait les mots "nom" et "email".
Par exemple
<input type="text" placeholder="name or email" autocomplete="off" />
Je l'ai contourné en mettant un espace de largeur zéro dans les mots de l'espace réservé. Pas plus de chrome autocomplete.
<input type="text" placeholder="nam​e or emai​l" autocomplete="off" />
autocomplete="off" fonctionne généralement, mais pas toujours. Cela dépend de la name du champ de saisie. Des noms tels que "adresse", "email", "nom" - seront complétés automatiquement (les navigateurs pensent aider les utilisateurs), lorsque des champs tels que "code", "pin" - ne seront pas complétés automatiquement (si autocomplete="off" est défini)
Mes problèmes étaient - autocomplete a été jouer avec google adresse helper
Je l'ai corrigé en le renommant
de
<input type="text" name="address" autocomplete="off">
à
<input type="text" name="the_address" autocomplete="off">
Testé en chrome 71.
Lorsque vous utilisez un widget comme Complétion automatique de jQuery UI, assurez-vous de vérifier qu'il n'est pas en train d'ajouter/de changer l'attribut autocomplete. J'ai trouvé que cela était vrai lors de son utilisation et interromprait tout travail que vous auriez pu faire pour remplacer toute mise en cache du champ du navigateur. Assurez-vous d'avoir un attribut de nom unique et forcez un attribut autocomplete unique après l'initialisation du widget. Voir ci-dessous quelques conseils sur la manière dont cela pourrait fonctionner dans votre situation.
<?php $autocomplete = 'off_'.time(); ?>
<script>
$('#email').autocomplete({
create: function( event, ui ) {
$(this).attr('autocomplete','<? echo $autocomplete; ?>');
},
source: function (request, response) { //your code here },
focus: function( event, ui ) { //your code here },
select: function( event, ui ) { //your code here },
});
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />
L'astuce relative aux éléments d'entrée masqués semble toujours fonctionner (Chrome 43) pour empêcher le remplissage automatique, mais gardez à l'esprit que Chrome tentera de le remplir automatiquement en fonction de la balise fictive. Vous devez faire correspondre l'espace réservé de l'élément d'entrée masqué avec celui de l'entrée que vous essayez de désactiver.
Dans mon cas, j'avais un champ avec un texte de substitution de "Ville ou code postal" que j'utilisais avec Google Place Autocomplete. Il est apparu qu'il tentait de remplir automatiquement comme s'il s'agissait d'un formulaire d'adresse. L'astuce n'a pas fonctionné jusqu'à ce que je mette le même espace réservé sur l'élément caché que sur l'entrée réelle:
<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />
On dirait que c'est réglé! Voir https://codereview.chromium.org/1473733008
J'utilise Chrome - Version 64.0.3282.140 (Build officiel) (64 bits) et a utilisé le code suivant, ainsi que le nom du formulaire, et cela fonctionne pour moi.
<form name="formNameHere">....</form>
<script type="text/javascript">
setTimeout(function(){
document.formNameHere.reset();
},500);
</script>
Aucune des solutions ne fonctionnait sauf pour lui donner un faux champ à compléter automatiquement. J'ai créé un composant React pour résoudre ce problème.
import React from 'react'
// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".
const DontBeEvil = () => (
<div style={{ display: 'none' }}>
<input type="text" name="username" />
<input type="password" name="password" />
</div>
)
export default DontBeEvil
Aucune idée pourquoi cela a fonctionné dans mon cas, mais sur chrome j'ai utilisé autocomplete = "none" et Chrome a cessé de suggérer des adresses pour mon champ de texte.
Pour ce problème, j'ai utilisé cette solution CSS. Ça marche pour moi.
input{
text-security:disc !important;
-webkit-text-security:disc !important;
-moz-text-security:disc !important;
}
Ajoutez ceci juste après la balise de formulaire:
<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>
Ajoutez ceci à votre fichier css:
.div-form{
opacity: 0;
}
Besoin d'utiliser AutoComplete = 'false' qui fonctionnera sur le navigateur Chrome et sur le code utilisé
<ng-form autocomplete="false">
.....
</ng-form>
Pour empêcher la saisie semi-automatique, définissez simplement un espace vide comme valeur d'entrée:
<input type="text" name="name" value=" ">
Voici ce qui a fonctionné pour moi sur la version 51.0.2704.106 de Chrome .<input id="user_name" type="text" name="user_name" autocomplete="off" required /> et en combinaison avec <input id="user_password" type="password" name="user_password" autocomplete="new-password" required />. Mon problème était qu'après avoir implémenté new-password, une liste déroulante de noms d'utilisateurs apparaissait toujours dans le champ nom_utilisateur.
Je viens d'essayer ce qui suit, et il semble que ce soit une astuce pour Chrome 53: il désactive également la liste déroulante "Utiliser le mot de passe pour:" lors de la saisie du champ du mot de passe.
Définissez simplement votre type d'entrée de mot de passe sur text, puis ajoutez le gestionnaire onfocus (en ligne ou via jQuery/Vanilla JS) pour définir le type sur password:
onfocus="this.setAttribute('type','password')"
Ou même mieux:
onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"
J'appelle cela l'approche du massue, mais cela semble fonctionner pour moi là où toutes les autres approches que j'ai essayées ont échoué:
<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />
Remarque: les attributs name et id en entrée ne doivent contenir aucun élément pouvant indiquer au navigateur la nature des données. Sinon, cette solution ne fonctionnera pas. Par exemple, j'utilise "fa" au lieu de "FullAddress".
Et le script suivant au chargement de la page (ce script utilise JQuery):
$("[data-autocomplete-ninja]").each(function () {
$(this).focus(function () {
$(this).data("ninja-name", $(this).attr("name")).attr("name", "");
}).blur(function () {
$(this).attr("name", $(this).data("ninja-name"));
});
});
La solution ci-dessus devrait empêcher le navigateur de remplir automatiquement les données recueillies à partir d'autres formulaires ou de soumissions précédentes sur le même formulaire.
Fondamentalement, je supprime l'attribut name lorsque l'entrée est active. Tant que vous n'effectuez aucune opération nécessitant l'attribut name pendant que l'élément est actif, comme l'utilisation de sélecteurs par nom d'élément, cette solution doit être inoffensive.
TL; DR: Indiquez à Chrome qu'il s'agit d'une nouvelle entrée de mot de passe et qu'il ne fournira pas les anciens comme suggestions de saisie semi-automatique:
<input type="password" name="password" autocomplete="new-password">
autocomplete="off" ne fonctionne pas à cause d'une décision de conception - de nombreuses recherches montrent que les utilisateurs ont beaucoup plus de temps pour pirater les mots de passe s'ils peuvent les stocker dans un navigateur ou un gestionnaire de mots de passe.
La spécification de autocompletea été modifiée , et prend désormais en charge diverses valeurs facilitant l'auto-complétion des formulaires de connexion:
<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">
<!-- current-password will populate for the matched username input -->
<input type="password" autocomplete="current-password" />
Si vous ne} fournissez pas encore ces tentatives de Chrome, Chrome ignore quand autocomplete="off".
La solution est qu'il existe également des valeurs autocomplete pour les formulaires de réinitialisation de mot de passe:
<label>Enter your old password:
<input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
<input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
<input type="password" autocomplete="new-password" name="pass-repeat" />
</label>
Vous pouvez utiliser cet indicateur autocomplete="new-password" pour indiquer à Chrome de ne pas deviner le mot de passe, même s'il en a un pour ce site.
Chrome peut également gérer les mots de passe des sites directement à l'aide de credentials API , qui est un standard et qui bénéficiera probablement d'un support universel.