Désactiver la saisie automatique dans Chrome 63
Je viens de mettre à jour mon navigateur pour Chrome Version 63.0.3239.84 (Build officiel) (64 bits).
Je me suis ensuite rendu sur mon site Web, où j’ai une boîte de saisie avec autocomplete='off', mais j’obtiens toujours ce qui suit:
(Vous pouvez voir ma liste déroulante de suggestions incorporée ci-dessous)
Cela n'a jamais été le cas. Rien d'autre n'a changé!
Pourquoi cela arrive-t-il? Est-ce un bug dans la nouvelle version de chrome? J'ai essayé toutes les autres suggestions telles que autocomplete="false" ou l'application autocomplete = off au formulaire également. J'ai même essayé de les appliquer avec jQuery après le chargement de la page, mais aussi sans succès.
J'ai testé cela sur plusieurs machines avec la dernière version de chrome sur différents systèmes d'exploitation. Le problème persiste.
Mise à jour de février 2018:
Merci à @JamesNisbet pour l'avoir signalé dans les commentaires.
Selon le équipe Chrome , autocomplete = "off" et autocomplete = "false" seront ignorés à l'avenir. Ce n'est pas une régression temporaire dans Chrome.
Chrome tentera de remplir automatiquement tous les champs de formulaire qui suivent le norme WHATWG sur la saisie semi-automatique . À une exception près, ils ignorent les valeurs "off" et "false".
En résumé, pour désactiver le remplissage automatique, utilisez l'attribut autocomplete avec une valeur qui ne figure pas dans la liste WHATWG.
Expliquez pourquoi, selon vous, autocomplete = "off" ne doit pas être ignoré par Chrome in ce fil de discussion Chromium .
Ressemble à une régression possible dans Chrome 63. Dans la documentation de remplissage automatique d'origine de Chrome:
Auparavant, de nombreux développeurs ajoutaient autocomplete = "off" à leurs champs de formulaire afin d'empêcher le navigateur d'exécuter tout type de fonctionnalité de saisie semi-automatique. Même si Chrome respectera toujours cette balise pour les données de saisie semi-automatique, il ne la respectera pas pour les données de remplissage automatique. Alors, quand devriez-vous utiliser autocomplete = "off"? Un exemple est lorsque vous avez implémenté votre propre version de la saisie semi-automatique pour la recherche.
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
Ils font une distinction entre le remplissage automatique et le remplissage automatique, bien qu'il ne soit pas clair qu'ils soient différents.
Chrome, Safari et Edge tentent tous d'implémenter le remplissage automatique, mais il n'existe pas de norme claire. Ils examinent l'attribut name plutôt qu'un attribut explicite et normalisé.
Pour le moment, autocomplete="something-new" est une bonne solution de contournement, bien que syntaxiquement, cela n’a aucun sens. Cela semble fonctionner car le navigateur ne peut pas le comprendre.
Nous avons essayé autocomplete = "false" et autocomplete = "off", ni l'un ni l'autre. Mais quelque chose que Chrome ne comprend pas, comme autocomplete = "disabled", semble fonctionner. Étrange!
Mise à jour: cela fonctionne à partir de Chrome 72.
2019 Il semble que autocomplete="disabled" fonctionne à nouveau à partir de Chrome 72.
DEPUIS QUE BEAUCOUP DE PERSONNES AVAIT SUIVI SANS LIRE LES COMMENTAIRES: CELA NE FONCTIONNE PLUS CHROME À PARTIR DE 2018/CHROME 63 + pertinent: https://bugs.chromium.org/p/chromium/issues/detail?id=587466
Si autocomplete = "false" au lieu de autocomplete = "off" fonctionne, vous pouvez en lire davantage à partir de l'équipe Chrome pour savoir pourquoi.
ici:
https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understandshttps://bugs.chromium.org/p/chromium/ issues/detail? id = 46815https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5chttps: //developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
J'ai réussi à obtenir un "hack" fonctionnel dans Chrome Version 65.0.3325.162 (Build officiel) (64 bits).
Je dois restituer un champ de saisie - masqué pour ne pas affecter ma page:
<input style="display:none;"/>
Ensuite, je rends mon champ de saisie du mot de passe:
<input type="password" autocomplete="new-password" />
Donc, ma forme finit par ressembler à:
<form>
<input style="display:none;" />
<input type="password" autocomplete="new-password" />
<input type="submit" />
</form>
Il est important de noter que vous ne pouvez pas ajouter un nom ou un attribut id à votre élément de saisie de type mot de passe et vous devez obligatoirement avoir autocomplete = "new-password".
Après Chrome 63, il semble qu'ils l'aient changé en autocomplete = "disabled"
Je vous recommande de vous procurer une bibliothèque de détection de navigateur et d'utiliser pour le reste autocomplete = "off"
On dirait que chrome recherche la balise html "label" la plus proche de l'entrée et analyse la valeur/html de l'étiquette pour affecter le remplissage automatique de l'entrée.
La solution la plus propre que j'ai trouvée pour désactiver le remplissage automatique de l'entrée était la suivante:
<label for="">Country</label>
<label for="" style="display: none;">hidden label to mislead chrome autocomplete</label>
<input ... />
Pour les utilisateurs de Angular, _ puisque le autocomplete = 'off' ignore les nouvelles versions chrome, le développeur chrome suggère autocomplete= 'false | random-string', de sorte que google chrome/modern les navigateurs ont 2 types d’aides utilisateurs -
- autocomplete = 'off' (ce qui empêche les dernières suggestions mises en cache).
- autocomplete = 'false | random-string '(qui empêche le réglage du remplissage automatique, car le' random-string 'n'est pas connu du navigateur).
alors que faire, en cas de désactivation des suggestions ennuyeuses? Voici le truc: -
ajoutez autocomplete = 'off' dans chaque champ de saisie. (ou simple Jquery).
$("input").attr('autocomplete', 'off');
Supprimez la balise <form name='form-name'> du code HTML et ajoutez ng-form = 'form-name' dans votre conteneur <div>. ajouter ng-form="form-name" retiendra également toutes vos validations.
Comme Chrome ne fonctionnera jamais correctement et/ou ne cesse de changer d'idée (je sais que ce n'est pas humain), la solution la plus simple pour garantir l'autofill/la complétion automatique est de procéder comme suit pour toutes les entrées que vous ne voulez pas remplir automatiquement:
<input type='text' readonly onfocus="this.removeAttribute('readonly');" value=''/>
Je me sens mal à quel point les différents navigateurs utilisent différentes options dans une même fonctionnalité.
Si c'est chrome, utilisez autocomplete = "disabled" qui gère à la fois la saisie semi-automatique et le remplissage automatique basé sur l'adresse (deux choses distinctes):
element.autocomplete = isGoogleChrome() ? 'disabled' : 'off';
Vous pouvez avoir un aperçu de la façon d'écrire isGoogleChrome () à partir d'ici
JavaScript: Comment savoir si le navigateur de l'utilisateur est Chrome?
J'ai résolu le problème sur mon site en remplaçant l'élément d'entrée incriminé par
<p class="input" contenteditable="true"> </p>
et utiliser jQuery pour renseigner un champ caché avant la soumission.
Mais c’est un bidule vraiment horrible rendu nécessaire par une mauvaise décision de Chromium.
Solution de travail actuelle utilisant JQuery:
Suppression du nom et de l'ID de l'entrée. Je ne veux pas de remplissage automatique et ajout d'une classe d'identification. J'ai ensuite créé une entrée cachée avec le nom du champ et l'id que je veux. Ensuite, lors de l'envoi du formulaire, je copie la valeur du champ sans identifiant ni nom (en la recherchant par ma classe d'identification), dans le champ masqué avec le nom et l'identifiant.
HTML
<form id="myform">
<input class="identifyingclass" value="">
<input class="hidden" id="city" name="city" value="">
<button type="submit">Submit</button>
</form>
Javascript
$('#myform').on('submit', function(e) {
$("#city").val($('.identifyingclass').val());
});
Je pense que cela devrait fonctionner, car je ne vois pas le remplissage automatique se verrouiller sur autre chose qu'un identifiant ou un nom.
Je fais généralement cela pour masquer l'icône de remplissage automatique:
<div style="width: 0; overflow:hidden;">
<input type="text" />
</div>
Comme Chrome place l'icône de remplissage automatique sur le premier champ de texte accessible en écriture, l'icône est placée sur le champ de saisie masqué.
Remarque: Rendre le champ de saisie masqué ou définir son affichage sur "aucun" ne semble pas fonctionner.
Essayez de supprimer le "Id" de l'entrée.
C'est comme ça que je l'ai réparé.
autocomplete="off" fonctionne dans le Chromeactuel _ 68 ainsi que dans le Chrome 63.
démo .