Désactiver le remplissage automatique de formulaire dans Chrome sans désactiver la saisie semi-automatique

Comment pouvons-nous désactiver la fonction de remplissage automatique de Chrome sur certaines pour éviter leur remplissage automatique lors du chargement de la page?

En même temps, je dois garder la saisie semi-automatique activée pour que l’utilisateur puisse toujours voir la liste des suggestions en cliquant sur l’entrée ou en la saisissant. Est-ce que cela peut être fait?

EDIT: N’hésitez pas à utiliser Javascript ou jQuery si vous le jugez nécessaire ou si vous pensez que cela rendrait votre solution plus simple.

Voici la magie que vous voulez:

  autocomplete="new-password" 

Chrome ignore intentionnellement autocomplete="off" et autocomplete="false" . Cependant, ils ont mis new-password dans une clause spéciale pour empêcher le remplissage automatique des nouveaux formulaires de mot de passe.

Je mets la ligne ci-dessus dans la saisie de mon mot de passe, et maintenant je peux éditer d’autres champs dans mon formulaire et le mot de passe n’est pas rempli automatiquement.

Un peu tard, mais voici ma solution infaillible, utile pour les pages comme la page d’inscription / inscription où l’utilisateur doit saisir un nouveau mot de passe.

 

Chrome détectera deux entrées de mot de passe et ne remplira pas automatiquement les champs de mot de passe. Cependant, le champ id = “password_fake” sera masqué via CSS. Ainsi, l’utilisateur ne verra qu’un seul champ de mot de passe.

J’ai également ajouté des atsortingbuts supplémentaires “x-autocompletetype”, qui est une fonction de remplissage automatique spécifique au chrome. De mon exemple, le chrome remplira automatiquement le prénom, le nom et l’adresse e-mail, et PAS le champ du mot de passe.

Correctif: empêcher le remplissage automatique du navigateur

   

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

Explication Au lieu de remplir les fonctions d’espaces blancs ou de fenêtre sur chargement, cet extrait fonctionne en définissant readonly-mode et en inscriptible si l’utilisateur focalise ce champ de saisie (focus contient le clic de la souris et les tabs).

Aucun jQuery nécessaire, pur JavaScript.

Après beaucoup de lutte, j’ai trouvé que la solution est beaucoup plus simple que vous pourriez l’imaginer:

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

Essaye ça…

 $(document).ready(function () { $('input').attr('autocomplete', 'false'); }); 

Je suis tombé sur le comportement étrange de remplissage automatique de chrome aujourd’hui. Il est arrivé d’activer sur les champs appelés: “embed” et “postpassword” (en remplissant leur login et mot de passe) sans raison apparente. Ces champs ont déjà été automatiquement terminés.

Aucune des méthodes décrites ne semblait fonctionner. Aucune des méthodes de l’autre réponse n’a également fonctionné. Je suis tombé sur ma propre idée en me basant sur la réponse de Steele (cela a peut-être fonctionné, mais j’ai besoin du format de données de poste fixe dans mon application):

Avant le mot de passe réel, ajoutez ces deux champs factices:

   

Seul celui-ci a finalement désactivé la saisie automatique de mon formulaire.

Il est dommage que désactiver un tel comportement de base soit aussi difficile et hack.

Je ne parviens pas à charger automatiquement mon Chrome lors du chargement de la page pour le tester, mais vous pouvez essayer d’append autocomplete="off" à vos champs, puis supprimer l’atsortingbut lors du chargement:

 $(window).load(function() { // can also try on document ready $('input[autocomplete]').removeAttr('autocomplete'); }); 

Cela pourrait aider: https://stackoverflow.com/a/4196465/683114

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:-webkit-autofill').each(function(){ var text = $(this).val(); var name = $(this).attr('name'); $(this).after(this.outerHTML).remove(); $('input[name=' + name + ']').val(text); }); }); } 

Il ressemble à un chargement, il trouve toutes les entrées avec remplissage automatique, ajoute leur HTML externe et supprime l’original, tout en conservant la valeur et le nom (facilement modifié pour préserver l’ID, etc.)

Si cela préserve le texte à remplissage automatique, vous pouvez simplement définir

 var text = ""; /* $(this).val(); */ 

À partir de la forme originale où cela a été posté, il prétend conserver la saisie semi-automatique. 🙂

Bonne chance!

Une solution consisterait à remplir automatiquement les entrées avec des caractères d’espacement et à les effacer lors de la mise au point.

Exemple: http://nfdb.net/autofill.php

    Autofill Test    


Cela devrait empêcher le navigateur de remplir automatiquement les champs, mais leur permettre de se remplir automatiquement.

Voici un autre exemple qui efface les entrées du formulaire après le chargement de la page. L’avantage de cette méthode est que les entrées ne comportent jamais de caractères d’espacement, mais l’inconvénient est qu’il est peu probable que les valeurs remplies automatiquement soient visibles pendant quelques millisecondes.

http://nfdb.net/autofill2.php

    Autofill Test    
This form has autofill disabled:


This form is untouched:


J’ai récemment été confronté à ce problème, et sans solution simple puisque mes champs peuvent être pré-remplis, je voulais partager un hack élégant que j’ai créé en définissant le type de mot de passe dans l’événement ready.

Ne déclarez pas votre champ de saisie comme mot de passe lors de sa création, mais ajoutez un écouteur d’événement prêt à être ajouté pour vous:

 function createSecretTextInput(name,parent){ var createInput = document.createElement("input"); createInput.setAtsortingbute('name', name); createInput.setAtsortingbute('class', 'secretText'); createInput.setAtsortingbute('id', name+'SecretText'); createInput.setAtsortingbute('value', 'test1234'); if(parent==null) document.body.appendChild(createInput); else document.getElementById(parent).appendChild(createInput); $(function(){ document.getElementById(name+'SecretText').setAtsortingbute('type', 'password'); }); }; createSecretTextInput('name', null); 

http://jsfiddle.net/

autocomplete="off" sur l’entrée qui fonctionne maintenant sur Chrome V44 (et Canary V47)

Un peu tard pour la fête … mais cela se fait facilement avec du jQuery:

 $(window).on('load', function() { $('input:-webkit-autofill').each(function() { $(this).after($(this).clone(true).val('')).remove(); }); }); 

Avantages

  • Supprime le texte et la couleur d’arrière-plan.
  • Conserve la saisie semi-automatique sur le terrain.
  • Conserve tous les événements / données liés à l’élément d’entrée.

Les inconvénients

  • Flash rapide du champ rempli automatiquement sur le chargement de la page.
 var fields = $('form input[value=""]'); fields.val(' '); setTimeout(function() { fields.val(''); }, 500); 

Le gestionnaire de mot de passe Chrome recherche les éléments d’entrée avec type="password" et remplit le mot de passe enregistré. Il ignore également la propriété autocomplete="off" .

Voici le correctif pour la dernière version de Chrome (version 40.0.2181.0) :

  

JS:

 setTimeout(function() { var input = document.querySelector("input[name=password]"); input.setAtsortingbute("type", "password"); }, 0) 

Solution la plus simple, fournissez une valeur de ” pour le champ du nom d’utilisateur (que vous pouvez toujours appeler “nom d’utilisateur”).

Si la valeur peut être renseignée par des valeurs saisies par l’utilisateur, comme c’est généralement le cas pour un formulaire que vous validez, indiquez la valeur ” si elle n’est pas déjà définie. En PHP,

 if(sortingm($username) == ''){$username = ' ';}  

Je pense en effet que l’autocomplétion du nom d’utilisateur et du mot de passe donne access à tous vos comptes à toute personne accédant à votre ordinateur, quelle que soit la nature obscure de vos mots de passe …

Ma solution est basée sur la solution utilisateur de dsuess, qui ne fonctionnait pas dans IE pour moi, car je devais cliquer une fois de plus dans la zone de texte pour pouvoir taper. Je l’ai donc adapté uniquement à Chrome:

 $(window).on('load', function () { if (navigator.userAgent.indexOf("Chrome") != -1) { $('#myTextBox').attr('readonly', 'true'); $('#myTextBox').addClass("forceWhiteBackground"); $('#myTextBox').focus(function () { $('#myTextBox').removeAttr('readonly'); $('#myTextBox').removeClass('forceWhiteBackground'); }); } }); 

Dans votre css, ajoutez ceci:

 .forceWhiteBackground { background-color:white !important; } 

Jusqu’à présent, j’ai trouvé que celui-ci fonctionnait, devant définir un délai d’attente de 1 ms pour que l’action se termine après le remplissage automatique du chrome.

 $(window).on('load', function() { setTimeout(function(){ $('input[name*=email],input[name*=Password]').val('-').val(null); },1); }); 

Je me demande s’il existe un moyen d’attacher cette fonction au déclenchement automatique du chrome, ou même de le redéclarer

Voici la dernière solution que j’ai découverte. Cela empêche Google de remplir les champs et de les surligner en jaune avant même d’avoir tapé quelque chose. Fondamentalement, si vous mettez “display: none” sur le terrain, Google est assez intelligent pour l’ignorer et passer au champ suivant. Si vous mettez “visibility: hidden”, cela le considère comme un champ dans le formulaire qui semble interférer avec ses calculs. Aucun javascript nécessaire.

 

Je n’aime pas utiliser setTimeout dans ou même avoir d’étranges entrées temporaires. Donc j’ai trouvé ça.

Changez simplement votre type de champ de mot de passe en texte

  

Et lorsque l’utilisateur se concentre sur cette entrée, changez-le de nouveau en mot de passe

 $('input[name=password]').on('focus', function (e) { $(e.target).attr('type', 'password'); }); 

Son fonctionnement avec la dernière version de Chrome (version 54.0.2840.71 (64 bits))

Pas une belle solution, mais a travaillé sur Chrome 56:

   

Notez un espace sur la valeur. Et alors:

 $(document).ready(function(){ setTimeout("$('#name').val('')",1000); }); 

Le remplissage automatique fonctionne avec l’atsortingbut name de l’entrée, donc si vous définissez un nom pour une entrée comme “prénom”, chrome le remplira.

Si vous voulez le désactiver, utilisez un nom impair comme “supermanname”.

Javascript ne peut pas résoudre votre problème.

Deuxième solution: vous pouvez masquer vos entrées avec les mêmes noms et définir leurs valeurs avec d’autres entrées. J’ai simplifié les Js avec jQUery.

 

Il vaut mieux utiliser désactivé pour vos entrées, afin d’empêcher l’auto-complétion.