pour les nouvelles versions Chrome vous pouvez simplement mettre autocomplete="new-password" dans votre champ de mot de passe et c'est tout. Je l'ai vérifié, fonctionne très bien.

a eu cette astuce de Chrome developer dans cette discussion: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. n'oubliez pas d'utiliser des noms uniques pour différents champs afin d'éviter l'autofilling.

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 Auto remplir votre nom d'Utilisateur/adresse e-mail dans le champ avant tout type=password champ. Il ne se soucie pas de ce que le champ est appelé - suppose juste le champ avant mot de passe va être votre nom d'utilisateur.

Ancienne Solution

il suffit d'utiliser <form autocomplete="off"> et il empêche le le préfixe du mot de passe ainsi que toute sorte de remplissage heuristique des champs basé sur des suppositions qu'un navigateur peut faire (qui sont souvent fausses). Par opposition à l'utilisation de <input autocomplete="off"> qui semble être assez ignorée par le mot de passe autofill (dans Chrome c'est-à-dire, Firefox lui obéit).

Mise À Jour De La Solution

Chrome ignore maintenant <form autocomplete="off"> . Donc ma solution (que j'ai supprimé) est maintenant à la mode.

il suffit de créer quelques champs et de les cacher avec"display:none". Exemple:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

mettez vos vrais champs en dessous.

N'oubliez pas d'ajouter le commentaire ou d'autres personnes dans votre équipe se demanderont ce que vous faites!

Mise À Jour Mars 2016

vient d'être testé avec le dernier Chrome - tout bon. C'est une réponse assez ancienne maintenant, mais je veux juste mentionner que notre équipe a été utilisé pendant des années maintenant sur des dizaines de projets. Il fonctionne toujours grand, malgré quelques commentaires ci-dessous. Il n'y a aucun problème d'accessibilité parce que les champs sont display:none , ce qui 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, il y a un truc dont vous aurez besoin. Montrer le faux champs pendant que vous manipulez le formulaire puis les cacher à nouveau une milliseconde plus tard.

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

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

Mise À Jour Juillet 2018

ma solution ne fonctionne plus aussi bien depuis que les experts de L'anti-usability de Chrome ont travaillé dur. Mais ils nous ont jeté un os en forme de:

<input type="password" name="whatever" autocomplete="new-password" />

cela fonctionne et résout la plupart du temps problème.

cependant, cela ne fonctionne pas lorsque vous n'avez pas de champ de mot de passe mais seulement une adresse e-mail. Cela peut également être difficile de l'obtenir pour arrêter de devenir jaune et le pré-remplissage. La solution de faux champs peut être utilisée pour corriger cela.

en fait, vous avez parfois besoin de déposer dans deux lots de faux champs, et de les essayer dans des endroits différents. Par exemple, J'avais déjà de faux champs au début de mon formulaire, mais Chrome a récemment commencé à remplir mon "Email" field again - alors j'ai doublé vers le bas et mis dans plus de faux champs juste avant le champ 'Email', et qui l'a corrigé. Enlever le premier ou le deuxième lot des champs revient à un autofillage excessif et incorrect.

Après des mois et des mois de lutte, j'ai trouvé que la solution est beaucoup plus simple que vous pourriez imaginer:

au lieu de autocomplete="off" utiliser autocomplete="false" ;)

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

parfois même autocomplete=off n'empêchera pas de remplir les références dans les mauvais champs.

une solution consiste à désactiver le remplissage automatique du navigateur en mode Lecture seule et à mettre en écriture sur focus:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

l'événement focus se produit lors de clics de souris et de tabulations dans les champs.

mise à jour:

Safari Mobile place le curseur sur le terrain, mais n'affiche pas le clavier virtuel. Cette nouvelle solution 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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6 /

/ / UpdateEnd

explication: le navigateur remplit automatiquement les références au mauvais champ de texte?

remplir les entrées incorrectement, par exemple remplir 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 cherche un champ de mot de passe pour insérer vos justificatifs d'identité enregistrés. Ensuite, il autofills username dans le champ textlike-input le plus proche , qui apparaît avant le champ password dans DOM (juste deviner en raison de l'observation). Comme le navigateur est la dernière instance et vous ne pouvez pas contrôler it,

cette simple correction ci-dessus a fonctionné pour moi.

essayez ceci. Je sais que la question Est quelque peu ancienne, mais il s'agit d'une approche différente du problème.

j'ai aussi remarqué que le numéro vient juste au-dessus du champ password .

j'ai essayé les deux méthodes comme

<form autocomplete="off"> et <input autocomplete="off"> mais aucun d'eux ne travaillait pour moi.

donc je l'ai corrigé en utilisant l'extrait ci - dessous-juste ajouté un autre champ de texte juste au-dessus du champ de type de mot de passe et l'ai fait display:none .

quelque chose comme ça:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

j'Espère que ça aidera quelqu'un.

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

<input type="password" name="pwd" autocomplete="new-password">

Je n'ai aucune idée de pourquoi, mais autocompelete=" new-password " désactive autofill. Il a fonctionné dans la dernière 49.0.2623.112 version chrome.

pour moi, simple

<form autocomplete="off" role="presentation">

L'a fait.

testé sur plusieurs versions, le dernier essai a été sur 56.0.2924.87

vous devez ajouter cet attribut :

autocomplete="new-password"

Lien Source : Article Complet

C'est tellement simple et délicate :)

Google chrome recherche essentiellement chaque premier élément de mot de passe visible à l'intérieur des étiquettes <form> , <body> et <iframe> pour permettre le remplissage automatique pour eux, donc pour désactiver cela, vous devez ajouter un élément de mot de passe factice comme suit:

1. • si votre élément de mot de passe à l'intérieur d'une étiquette <form> vous devez mettre l'élément fictif comme premier élément dans votre forme immédiatement après <form> open tag

   • si votre élément de mot de passe n'est pas dans une étiquette <form> , mettez l'élément factice comme premier élément dans votre page html immédiatement après <body> ouvrir l'étiquette

2. vous devez cacher l'élément factice sans utiliser css display:none donc essentiellement utiliser ce qui suit comme un mannequin éléments du mot de passe.

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
   

Voici les solutions que J'ai proposées, car Google insiste pour passer outre à tout ce que les gens semblent faire.

Option 1-Sélectionner tout le texte sur le clic

définissez les valeurs des entrées à 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:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

et voici le jQuery:

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

Je ne vois vraiment pas Chrome jamais jouer avec les valeurs. Ce serait fou. Donc j'espère que c'est une solution sûre.

Option 2-Définissez la valeur email à un espace, puis supprimez-le

en supposant que vous avez deux entrées, comme le courriel et le mot de passe, définissez la valeur du champ de courriel à " " (un espace) et ajoutez l'attribut/valeur autocomplete="off" , puis effacez cela 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 leur côté serveur d'entrée (vous devriez probablement être quand même), au cas où ils ne suppriment 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 de temps en temps dans mes tests, donc tripler ce nombre semble comme un pari sûr.

N'ayant pas réglé la valeur initiale la valeur à un espace résulte en Chrome laissant l'entrée comme jaune, comme si elle avait auto-rempli.

Option 3-inputs cachés

mettez ceci au début de la forme:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

assurez-vous de conserver la note HTML pour que vos autres développeurs ne la suppriment pas! Assurez-vous également que le nom de l'entrée cachée est pertinent.

si vous mettez en œuvre une fonctionnalité de boîte de recherche, essayez de définir l'attribut type à search comme suit:

<input type="search" autocomplete="off" />

cela fonctionne pour moi sur Chrome v48 et semble être un markup légitime:

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

j'ai trouvé que l'ajout de ceci à un formulaire empêche Chrome d'utiliser Autofill.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Trouvés 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 quand Autocompléter. A un réel de Microsoft.

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

ajouter l'attribut readonly à la balise avec l'événement onfocus le supprimer corrige le problème

si vous avez des problèmes avec la conservation des emplacements mais désactiver l'autofill chrome j'ai trouvé cette solution.

problème

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

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

l'exemple ci-dessus produit toujours le problème de remplissage automatique, mais si vous utilisez le required="required" et certains CSS vous pouvez répliquer les espaces réservés et Chrome ne sera pas ramasser les balises.

Solution

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

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 combos de mots de passe username c'est un problème facile à résoudre. Chrome heuristics cherche le modèle:

<input type="text">

suivi de:

<input type="password">

simplement briser ce processus en invalidant ce:

<input type="text">
<input type="text" onfocus="this.type='password'">

Mike Nelsons solution ne fonctionne pas pour moi en Chrome 50.0.2661.102 m. Il suffit d'ajouter un élément de saisie du même type avec display:none set ne désactive plus le navigateur natif auto-complete. Il est maintenant nécessaire de dupliquer l'attribut name du champ input sur lequel vous souhaitez désactiver l'option auto-complete on.

aussi, pour éviter d'avoir le champ d'entrée dupliqué quand ils sont dans un élément de formulaire, vous devez placer un désactivé sur l'élément qui n'est pas afficher. Cela empêchera que cet élément ne soit soumis dans le cadre de l'action formelle.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

utiliser css texte-sécurité: disque sans utiliser type=password .

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

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

dans certains cas, le navigateur continuera de suggérer des valeurs d'autocomplétion même si l'attribut autocompléte est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. Le truc pour vraiment forcer la non-autocompletion est pour assigner une chaîne aléatoire à l'attribut , par exemple:

autocomplete="nope"

il y a deux pièces à ça. Chrome et d'autres navigateurs se souviendront des valeurs saisies précédemment pour les noms de champ, et fournir une liste autocomplète à l'utilisateur basé sur cela (notamment, les entrées de type de mot de passe sont jamais rappelé de cette façon, pour des raisons assez évidentes). Vous pouvez ajouter autocomplete="off" pour empêcher cela sur des choses comme votre champ d'email.

cependant, vous avez alors des remplisseurs de mot de passe. La plupart des navigateurs ont leur propre intégré les mises en œuvre et il ya aussi de nombreux tiers services publics qui fournissent cette fonctionnalité. Ceci, vous ne peut pas arrêter. Il s'agit de l'utilisateur faisant son propre choix de sauvegarder ces informations pour être remplies automatiquement plus tard, et est complètement en dehors de la portée et de la sphère d'influence de votre application.

Je n'ai vraiment pas aimé faire des champs cachés, je pense que le faire comme ça va devenir vraiment confus très vite.

sur les champs d'entrée que vous voulez arrêter de remplir automatiquement cela fonctionnera. Faites les champs en lecture seule et sur focus supprimez cet attribut comme ceci

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

ce n'est vous devez d'abord enlever le attribut lecture seule en sélectionnant le champ et en cette fois très probablement, vous serez peuplé avec votre propre entrée d'utilisateur et en baissant le autofill pour prendre en charge

en mettant autocomplete à off si cela devait fonctionner ici, j'ai un exemple qui est utilisé par google dans la page de recherche. J'ai trouvé ce à partir d'inspecter l'élément.

modifier : Dans le cas off ne fonctionne pas alors essayer false ou nofill . Dans mon cas, il fonctionne avec la version chrome 48.0

Voici un sale hack -

vous avez votre élément ici (ajout de l'attribut disabled):

<input type="text" name="test" id="test" disabled="disabled" />

et puis au bas de votre page Web mettre un peu de JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

selon Chromium bug report #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 était de ajouter un faux champ de mot de passe :

<input type="password" class="hidden" />
<input type="password" />

solution différente, basée sur webkit. Comme déjà mentionné, chaque fois que Chrome trouve un champ password, il autocomplète l'email. AFAIK, ceci est indépendamment de autocomplete = [whatever].

pour contourner ce changement, changez le type d'entrée en texte et appliquez la police de sécurité webkit dans la forme que vous voulez.

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

<input type ="text" class="secure-font">

D'après ce que je vois, c'est au moins aussi sûr que input type=password, c'est copier-coller sécurisé. Cependant, il est vulnérable par supprimer le style qui va supprimer 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 n'importe quels mots de passe auto rempli donc c'est à peu près la même chose en fait.

Eh bien puisque nous avons tous ce problème, j'ai investi du temps pour écrire une extension jQuery de travail pour cette question. Google doit suivre le balisage html, nous ne suivons pas Google

(function ($) {

"use strict";

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

ajoute simplement ceci à un fichier comme /js/jquery.étendre.js et l'inclure après jQuery. Appliquez - le à chaque élément de forme sur la charge du document comme ceci:

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

jsfiddle avec des tests

la seule façon qui fonctionne pour moi était: (jQuery requis)

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

j'ai fait face au même problème. Et voici la solution pour désactiver auto-fill user name & password sur Chrome (juste testé avec Chrome seulement)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">

au lieu de" c'est ce qui a fonctionné pour moi " des réponses et d'autres réponses qui ressemblent à des piratages complets... C'est actuellement la façon dont chrome (et les dernières spécifications) va gérer les attributs autocomplete sur vos input éléments:

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

TLDR: ajouter autocomplete='<value>' sur vos entrées, où <value> devrait être n'importe quelle chaîne ça définit à quoi sert le champ. Cela fonctionne de la même manière que l'attribut name . Utilisez les valeurs suggérées sur le lien ci-dessus dans la mesure du possible.

également, supprimer l'attribut autocomplete de votre formulaire

les valeurs saisies précédemment par chrome sont affichées dans la liste déroulante.Cela peut être désactivé par autocomplete=off , l'adresse explicitement sauvegardée dans les paramètres avancés de chrome donne un popup autofill lorsqu'un champ d'adresse est mis au point.Ceci peut être désactivé par autocomplete="false".Mais cela permettra à chrome d'afficher les valeurs mises en cache dans dropdown.

sur un champ html saisi, la suite désactivera les deux.

Role="presentation" & autocomplete="off"

lors de la sélection des champs d'entrée pour l'adresse autofill Chrome ignore les champs d'entrée qui n'ont pas d'élément HTML label précédent.

pour s'assurer que chrome parser ignore un champ d'entrée pour la popup d'adresse autofill un bouton caché ou un contrôle d'image peut être ajouté entre l'étiquette et la boîte de texte. Cela cassera la séquence de parsing chrome de la création de la paire étiquette-entrée pour autofill. Les cases à cocher sont ignorées lors de l'analyse des champs d'adresse

Chrome aussi considère l'attribut "pour" sur l'élément étiquette. Il peut être utilisé pour briser la séquence d'analyse du chrome.

essai whit un espace vide dans la valeur:

<input type="email" name="email" value="&nbsp;">
<input type="password" name="password" value="&nbsp;">

chrome 54.0.2840.59