Désactiver le remplissage automatique du formulaire dans Chrome sans désactiver la saisie semi-automatique
Comment pouvons-nous désactiver la fonctionnalité de remplissage automatique de Chrome sur certains <input>s afin d'éviter leur remplissage automatique lors du chargement de la page?
En même temps, je dois garder la saisie semi-automatique activée afin que l'utilisateur puisse toujours voir la liste des suggestions en cliquant sur l'entrée ou en la tapant. Cela peut-il être fait?
EDIT: N'hésitez pas à utiliser du Javascript simple ou jQuery si vous le jugez nécessaire ou si vous pensez que cela simplifierait votre solution.
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 les nouveaux formulaires de mot de passe de se remplir automatiquement.
Je mets la ligne ci-dessus dans la saisie de mon mot de passe et je peux maintenant modifier d'autres champs de mon formulaire et le mot de passe n'est pas rempli automatiquement.
Un peu tard, mais voici ma solution à toute épreuve utile pour des pages telles que la page d'inscription/inscription où l'utilisateur doit saisir un nouveau mot de passe.
<form method="post">
<input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
<input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
<input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
<input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
<input type="password" name="password" id="password" autocomplete="off">
</form>
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. Donc, l'utilisateur ne verra qu'un seul champ de mot de passe.
J'ai également ajouté des attributs supplémentaires, "x-autocompletetype", qui est une fonctionnalité de remplissage automatique spécifique à Chrome. D'après mon exemple, chrome remplira automatiquement le nom, le nom de famille, l'adresse électronique et PAS le mot de passe.
Fix: empêche la saisie automatique du navigateur dans
<input type="password" readonly onfocus="this.removeAttribute('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
Explication Au lieu de remplir des espaces ou des fonctions window-on-load, cet extrait fonctionne en mode lecture seule et passe en écriture si l'utilisateur sélectionne ce champ de saisie (le focus contient un clic de souris et des champs de tabulation).
Pas besoin de jQuery, JavaScript pur.
Après beaucoup de difficultés, j'ai trouvé que la solution est beaucoup plus simple que vous ne pouvez 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 des champs appelés: "embed" et "postpassword" (en y renseignant le nom d'utilisateur et le mot de passe), sans raison apparente. La complétion automatique était déjà désactivée pour ces champs.
Aucune des méthodes décrites ne semblait fonctionner. Aucune des méthodes de l'autre réponse ne fonctionnait aussi bien. Je suis tombé sur ma propre idée en me basant sur la réponse de Steele (elle aurait peut-être fonctionné, mais j'ai besoin du format de données de poste fixe dans mon application):
Avant le vrai mot de passe, ajoutez ces deux champs factices:
<input type='text' style='display: none'>
<input type='password' style='display: none'>
Seul celui-ci a finalement désactivé le remplissage automatique de mon formulaire.
Il est dommage que la désactivation d’un comportement aussi fondamental soit aussi dure et difficile.
Je ne parviens pas à faire remplir automatiquement mon Chrome lors du chargement de la page pour le tester, mais vous pouvez essayer d'ajouter autocomplete="off" à vos champs, puis de supprimer l'attribut au 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);
});
});
}
Cela ressemble au chargement, il trouve toutes les entrées avec la saisie automatique, ajoute leur HTML externe et supprime l'original, tout en préservant la valeur et le nom (facilement modifiables pour conserver l'ID, etc.)
Si cela conserve le texte de remplissage automatique, vous pouvez simplement définir
var text = ""; /* $(this).val(); */
A partir du formulaire original où cela a été posté, il prétend conserver la saisie semi-automatique. :)
Bonne chance!
autocomplete="off" sur l'entrée fonctionne maintenant sur Chrome V44 (et Canary V47)
Une solution serait de remplir automatiquement les entrées avec des caractères d'espacement et de les mettre clairement en évidence.
Exemple: http://nfdb.net/autofill.php
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield;
// After the document has loaded, manipulate DOM elements.
window.addEventListener('load', function() {
// Get the username field element.
userfield = document.getElementById('user');
// Listen to the 'focus' event on the input element.
userfield.addEventListener('focus', function() {
// Checks if the value is the EM space character,
// and removes it when the input is recieves focus.
if (this.value == '\u2003') this.value = ''
}, false);
// Listen to the 'blur' event on the input element.
// Triggered when the user focuses on another element or window.
userfield.addEventListener('blur', function() {
// Checks if the value is empty (the user hasn't typed)
// and inserts the EM space character if necessary.
if (this.value == '') this.value = '\u2003';
}, false);
}, false);
</script>
</head>
<body>
<form method="GET" action="">
<input id="user" name="username" type="text" value=" "/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
Cela devrait empêcher le navigateur de remplir automatiquement les champs, tout en leur permettant de se compléter.
Voici un autre exemple qui efface les entrées de formulaire après le chargement de la page. L'avantage de cette méthode est que les entrées ne contiennent jamais de caractères d'espacement, mais l'inconvénient est qu'il existe une faible possibilité que les valeurs à remplissage automatique soient visibles pendant quelques millisecondes.
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield, passfield;
// Wait for the document to load, then call the clear function.
window.addEventListener('load', function() {
// Get the fields we want to clear.
userfield = document.getElementById('user');
passfield = document.getElementById('pass');
// Clear the fields.
userfield.value = '';
passfield.value = '';
// Clear the fields again after a very short period of time, in case the auto-complete is delayed.
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);
}, false);
</script>
</head>
<body>
<div>This form has autofill disabled:</div>
<form name="login" method="GET" action="./autofill2.php">
<input id="user" name="username" type="text" value=""/><br/>
<input id="pass" name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
<div>This form is untouched:</div>
<form name="login" method="GET" action="./autofill2.php">
<input name="username" type="text" value=""/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
J'ai récemment été confronté à ce problème, et sans solution simple puisque mes champs peuvent être pré-remplis, je souhaitais 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 type de mot de passe lors de sa création, mais ajoutez un écouteur d'événement prêt à l'ajouter pour vous:
function createSecretTextInput(name,parent){
var createInput = document.createElement("input");
createInput.setAttribute('name', name);
createInput.setAttribute('class', 'secretText');
createInput.setAttribute('id', name+'SecretText');
createInput.setAttribute('value', 'test1234');
if(parent==null)
document.body.appendChild(createInput);
else
document.getElementById(parent).appendChild(createInput);
$(function(){
document.getElementById(name+'SecretText').setAttribute('type', 'password');
});
};
createSecretTextInput('name', null);
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
fields.val('');
}, 500);
Jusqu'ici, j'ai constaté que celui-ci fonctionnait, car il fallait définir un délai d'attente de 1 ms pour que l'action soit terminée après le remplissage automatique de chrome.
$(window).on('load', function() {
setTimeout(function(){
$('input[name*=email],input[name*=Password]').val('-').val(null);
},1);
});
Je me demande s’il est possible d’attacher cette fonction à une cuisson au chrome à auto-complétion, ou même de la redéclarer
La solution la plus simple, donnez la valeur '' au champ du nom d'utilisateur (que vous pouvez toujours appeler 'nom d'utilisateur').
Si la valeur peut être renseignée par les valeurs entrées par l'utilisateur, comme c'est habituellement le cas pour un formulaire que vous validez, indiquez la valeur '' s'il n'est pas déjà défini. En PHP,
if(trim($username) == ''){$username = ' ';}
<input type='text' value = '$username' name = 'Username' />
En fait, je pense que l'auto-complétion pour le nom d'utilisateur et le mot de passe offre un accès à tous vos comptes à tous ceux qui accèdent à votre ordinateur, quel que soit le degré d'obscurité de vos mots de passe ...
Pas une belle solution, mais travaillé sur Chrome 56:
<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">
Notez un espace sur la valeur. Et alors:
$(document).ready(function(){
setTimeout("$('#name').val('')",1000);
});
Ma solution est basée sur la solution utilisateur dsuess, qui ne fonctionnait pas dans IE pour moi, car je devais cliquer une nouvelle fois dans la zone de texte pour pouvoir taper. Par conséquent, je l'ai adaptée 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;
}
Le gestionnaire de mots de passe Chrome recherche les éléments de saisie avec type="password" et remplit le mot de passe enregistré. Il ignore également la propriété autocomplete="off".
Voici le correctif pour les derniers Chrome (version 40.0.2181.0 canary) :
<input name="password">
JS:
setTimeout(function() {
var input = document.querySelector("input[name=password]");
input.setAttribute("type", "password");
}, 0)
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 de remplissage automatique et la couleur d'arrière-plan.
- Conserve l'auto-complétion sur le terrain.
- Conserve tous les événements/données liés à l'élément d'entrée.
Les inconvénients
- Clignotement rapide du champ rempli automatiquement lors du chargement de la page.
Je n'aime pas utiliser setTimeout ou même avoir des entrées temporaires étranges. Alors je suis venu avec cela.
Changez simplement votre type de champ de mot de passe en texte
<input name="password" type="text" value="">
Et lorsque l'utilisateur cible cette entrée, changez-le à nouveau avec un mot de passe
$('input[name=password]').on('focus', function (e) {
$(e.target).attr('type', 'password');
});
Son fonctionnement à l'aide de la dernière version de Chrome (version 54.0.2840.71 (64 bits))
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é quoi que ce soit. En gros, si vous mettez "display: none" sur le champ, Google est suffisamment malin pour l'ignorer et passer au champ suivant. Si vous mettez "visibilité: caché", cela le compte comme un champ du formulaire qui semble interférer avec ses calculs. Pas de javascript nécessaire.
<form method='post'>
<input type='text' name='u' size='16'/>
<input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br />
<input type='password' name='p' size='16'/>
</form>