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

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

PS: n’oubliez pas d’utiliser des noms uniques pour différents champs afin d’empêcher le remplissage automatique.

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 champ type=password . Il ne se soucie pas de ce que le champ est appelé – suppose simplement que le champ avant mot de passe va être votre nom d’utilisateur.

Ancienne solution

Il suffit d’utiliser

et d’empêcher le pré-remplissage du mot de passe ainsi que tout type de remplissage heuristique de champs en fonction des hypothèses qu’un navigateur peut faire (qui sont souvent erronées). Par opposition à l’utilisation de qui semble être pratiquement ignoré par le remplissage automatique du mot de passe (dans Chrome, Firefox y obéit).

Solution mise à jour

Chrome ignore maintenant

. Par conséquent, ma solution de contournement d’origine (que j’avais supprimée) fait désormais fureur.

Il suffit de créer quelques champs et de les masquer avec “display: none”. Exemple:

Ensuite, placez vos vrais champs en dessous.

N’oubliez pas d’append le commentaire ou d’autres personnes de votre équipe se demanderont ce que vous faites!

Mise à jour mars 2016

Juste testé avec le dernier Chrome – tout va bien. C’est une réponse assez ancienne maintenant, mais je veux simplement 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 sont display:none signifie qu’ils ne sont pas ciblés. Comme je l’ai mentionné, vous devez les mettre avant vos vrais champs.

Si vous utilisez JavaScript pour modifier votre formulaire, vous aurez besoin d’un truc supplémentaire. Montrez les faux champs pendant que vous manipulez le formulaire, puis masquez-les à nouveau une milliseconde après.

Exemple de code utilisant jQuery (en supposant que vous donniez une classe à vos faux champs):

  $(".fake-autofill-fields").show(); // some DOM manipulation/ajax here window.setTimeout(function () { $(".fake-autofill-fields").hide(); },1); 

Mise à jour de juillet 2018

Ma solution ne fonctionne plus si bien que les experts anti-usabilité de Chrome ont travaillé dur. Mais ils nous ont jeté un os sous la forme de:

Cela fonctionne et résout surtout 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. Cela peut aussi être difficile de le faire cesser de jaunir et de se remplir. La solution de faux champs peut être utilisée pour résoudre ce problème.

En fait, vous devez parfois vous rendre dans 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 commencé à remplir à nouveau mon champ “Email” – alors j’ai doublé et mis plus de champs faux juste avant le champ “Email”, . Supprimer le premier ou le second lot des champs revient à un remplissage automatique trop zélé.

Après des mois et des mois de lutte, j’ai trouvé que la solution était beaucoup plus simple que vous ne l’imaginez:

Au lieu de autocomplete="off" utilisez autocomplete="false" 😉

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

Parfois, même la autocomplete=off – autocomplete=off n’empêche pas de renseigner les informations d’identification dans de mauvais champs.

Une solution de contournement consiste à désactiver la saisie automatique du navigateur en mode lecture seule et à définir l’écriture sur focus:

L’événement focus se produit lors des clics de souris et des tabulations dans les champs.

Mettre à jour:

Mobile Safari définit le curseur dans le champ, mais n’affiche pas le clavier virtuel. Cette nouvelle solution 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 sur 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 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,

Ce correctif readonly ci-dessus a fonctionné pour moi.

Essaye ça. Je sais que la question est un peu ancienne, mais cette approche est différente pour le problème.

J’ai également remarqué que le problème se situe juste au-dessus du champ password .

J’ai essayé les deux méthodes comme

et mais aucun d’entre eux n’a fonctionné pour moi.

Donc, j’ai corrigé en utilisant l’extrait ci-dessous – il suffit d’append un autre champ de texte juste au-dessus du champ de type de mot de passe et l’a display:none .

Quelque chose comme ça:

J’espère que ça va aider quelqu’un.

Je ne sais pas pourquoi, mais cela a aidé et travaillé pour moi.

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

Pour moi, simple

L’a fait.

Testé sur plusieurs versions, le dernier essai était sur 56.0.2924.87.

Vous devez append cet atsortingbut:

 autocomplete="new-password" 

Lien source: Article complet

C’est tellement simple et délicat 🙂

Google Chrome recherche essentiellement chaque premier élément de mot de passe visible dans les balises

, et pour permettre leur remplissage automatique. Pour le désactiver, vous devez append un élément de mot de passe factice comme suit:

1. • Si votre élément de mot de passe dans une

     vous devez placer l’élément factice comme premier élément de votre formulaire immédiatement après la

     open

   • si votre élément de mot de passe ne se trouvant pas dans une

     place l’élément factice comme premier élément de votre page HTML immédiatement après la open

2. Vous devez masquer l’élément factice sans utiliser l’ display:none css display:none utilise essentiellement l’élément suivant comme élément de mot de passe factice.

Voici les solutions que je propose, car Google insiste sur le dépassement de chaque travail que les gens semblent effectuer.

Option 1 – sélectionnez tout le texte sur clic

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:

Et voici le jQuery:

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

Je ne peux vraiment pas voir Chrome jouer avec les valeurs. Ce serait fou. Donc, espérons que c’est une solution sûre.

Option 2 – définissez la valeur du courrier électronique dans un espace, puis supprimez-la

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

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

Voici le jQuery:

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

J’ai mis un temps mort à 15 parce que 5 semblait fonctionner occasionnellement dans mes tests, donc sortingpler ce nombre semble être une valeur sûre.

Si vous ne définissez pas la valeur initiale dans un espace, Chrome laisse l’entrée en jaune, comme si elle l’avait remplie automatiquement.

Option 3 – entrées cachées

Mettez ceci au début du formulaire:

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.

J’ai constaté que l’ajout de cette fonctionnalité à un formulaire empêche Chrome d’utiliser Autofill.

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

Vraiment décevant que Chrome ait décidé qu’il sait mieux que le développeur à propos de la saisie semi-automatique. A un vrai Microsoft Microsoft.

append l’atsortingbut readonly à la balise avec l’événement onfocus en le supprimant corrige le problème

Si vous ne parvenez pas à conserver les espaces réservés, mais à désactiver l’autofill chrome, j’ai trouvé cette solution.

Problème

HTML

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

L’exemple ci-dessus produit toujours le problème de remplissage automatique, mais si vous utilisez le paramètre required="required" et que certains CSS vous permettent de répliquer les espaces réservés, Chrome ne récupérera pas les tags.

Solution

HTML

 
  Name 
  Email 
  Street 
  

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/

Pour les combinaisons de mots de passe, il s’agit d’un problème facile à résoudre. Les heuristiques Chrome recherchent le motif:

suivi par:

Il suffit de casser ce processus en invalidant ceci:

Mike Nelsons a fourni la solution ne fonctionnait pas pour moi dans Chrome 50.0.2661.102 m. Il suffit d’append un élément d’entrée du même type avec display: aucun set ne désactive plus l’auto-complétion du navigateur natif. Il est maintenant nécessaire de dupliquer l’atsortingbut name du champ de saisie que vous souhaitez désactiver automatiquement.

De même, pour éviter que le champ de saisie ne soit dupliqué lorsqu’ils se trouvent dans un élément de formulaire, vous devez placer une désactivation 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.

Utilisez css text-security: disc sans utiliser type = password .

html

   or 
    

css

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

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

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é. Ceci, vous ne pouvez pas arrêter. C’est l’utilisateur qui choisit lui-même d’enregistrer ces informations pour qu’elles soient automatiquement remplies plus tard, et est complètement en dehors de la scope et de la sphère d’influence de votre application.

Je n’aimais vraiment pas faire des champs cachés, je pense que le faire deviendrait vraiment très compliqué.

Sur les champs de saisie que vous voulez arrêter de compléter automatiquement, cela fonctionnera. Rendre les champs en lecture seule et sur focus supprimer cet atsortingbut comme ceci

Qu’est-ce que cela fait est que vous devez d’abord supprimer l’ atsortingbut en lecture seule en sélectionnant le champ et à ce moment-là le plus probable que vous serez rempli avec votre propre entrée utilisateur et en baissant la saisie automatique pour prendre en charge

En définissant autocomplete sur off devrait fonctionner ici, j’ai un exemple qui est utilisé par Google dans la page de recherche. Je l’ai trouvé à partir de l’élément d’inspection.

edit : Au cas où off ne fonctionne pas alors essayez false ou nofill . Dans mon cas, il fonctionne avec la version chrome 48.0

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 la non-complétion automatique est d’affecter une chaîne aléatoire à l’atsortingbut , par exemple:

 autocomplete="nope" 

If you are implementing a search box feature, try setting the type atsortingbute to search as follows:

This is working for me on Chrome v48 and appears to be legitimate markup:

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

Here’s a dirty hack –

You have your element here (adding the disabled atsortingbute):

And then at the bottom of your webpage put some JavaScript:

As per Chromium bug report #352347 Chrome no longer respects autocomplete="off|false|anythingelse" , neither on forms nor on inputs.

The only solution that worked for me was to add a dummy password field :

Different solution, webkit based. As mentioned already, anytime Chrome finds a password field it autocompletes the email. AFAIK, this is regardless of autocomplete = [whatever].

To circumvent this change the input type to text and apply the webkit security font in whatever form you want.

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

From what I can see this is at least as secure as input type=password, it’s copy and paste secure. However it is vulnerable by removing the style which will remove asterisks, of course input type = password can easily be changed to input type = text in the console to reveal any autofilled passwords so it’s much the same really.

Well since we all have this problem I invested some time to write a working jQuery extension for this issue. Google has to follow html markup, not we follow Google

 (function ($) { "use ssortingct"; $.fn.autoCompleteFix = function(opt) { var ro = 'readonly', settings = $.extend({ atsortingbute : 'autocomplete', sortinggger : { 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.atsortingbute), settings.sortinggger.disable)) el.find('input').autoCompleteFix({force:force}); } else { var disabled = -1 !== $.inArray(el.attr(settings.atsortingbute), settings.sortinggger.disable); var enabled = -1 !== $.inArray(el.attr(settings.atsortingbute), settings.sortinggger.enable); if (settings.force && !enabled || disabled) el.attr(ro, ro).focus(settings.focus).val(""); } }); }; })(jQuery); 

Just add this to a file like /js/jquery.extends.js and include it past jQuery. Apply it to each form elements on load of the document like this:

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

jsfiddle with tests

The only way that works for me was:(jQuery required)

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

I’ve faced same problem. And here is the solution for disable auto-fill user name & password on Chrome (just tested with Chrome only)

Instead of “this is what worked for me” answers and other answers that look like complete hacks… This is currently how chrome (and the latest spec) will handle the autocomplete atsortingbutes on your input elements:

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en

TLDR: Add autocomplete='' on your inputs, where should be any ssortingng that defines what the field is for. This works similarly to the name atsortingbute. Use the suggested values on the link above where possible.

Also, remove the autocomplete atsortingbute from your form

Previously entered values cached by chrome is displayed as dropdown select list.This can be disabled by autocomplete=off , explicitly saved address in advanced settings of chrome gives autofill popup when an address field gets focus.This can be disabled by autocomplete=”false”.But it will allow chrome to display cached values in dropdown.

On an input html field following will switch off both.

Role="presentation" & autocomplete="off"

While selecting input fields for address autofill Chrome ignores those input fields which don’t have preceding label html element.

To ensure chrome parser ignores an input field for autofill address popup a hidden button or image control can be added between label and textbox. This will break chrome parsing sequence of label -input pair creation for autofill. Checkboxes are ignored while parsing for address fields

Chrome also considers “for” atsortingbute on label element. It can be used to break parsing sequence of chrome.

try whit a blank space in the value :

chrome 54.0.2840.59