Formulaire désactivable auto-remplir dans Chrome sans désactiver autocomplete [dupliquer]
cette question a déjà une réponse ici:
- Désactivation De La Fonction De Remplissage Automatique Chrome 70 réponses
comment désactiver la fonction de remplissage automatique de Chrome sur certains <input>
pour les empêcher de se remplir automatiquement lorsque la page se charge?
à la même temps j'ai besoin de garder autocomplete activé, de sorte que l'utilisateur peut toujours voir la liste des suggestions en cliquant sur l'entrée ou en tapant dedans. Cela peut-il être fait?
EDIT: se Sentir libre d'utiliser du Javascript ou jQuery si vous sentez que c'est nécessaire, ou vous vous sentez comme faire votre solution plus simple.
21 réponses
Voici la magie que vous voulez:
autocomplete="new-password"
Chrome ignore intentionnellement autocomplete="off"
et autocomplete="false"
. Cependant, ils ont mis new-password
comme clause spéciale pour empêcher les nouveaux formulaires de mot de passe d'être remplis automatiquement.
j'ai mis la ligne ci-dessus dans mon mot de passe, et maintenant je peux modifier d'autres champs dans mon formulaire et le mot de passe n'est pas rempli automatiquement.
un peu en retard, mais voici ma solution de preuve infaillible utile pour les pages comme la page d'inscription où l'utilisateur doit entrer 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" one sera caché via CSS. Ainsi, l'utilisateur ne verra qu'un seul champ de mot de passe.
j'ai aussi ajouté des attributs supplémentaires" x-autocompletetype " qui est un fonction de remplissage automatique spécifique à chrome experimental. Dans mon exemple, chrome va auto-remplir le prénom, le nom de famille et l'adresse e-mail, et pas le champ de mot de passe.
Correction: empêcher le navigateur de saisie automatique dans
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
mise à jour: Le Safari Mobile place le curseur sur le terrain, 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(); }" />
Live Demo https://jsfiddle.net/danielsuess/n0scguv6/
/ / UpdateEnd
explication Plutôt remplir les espaces blancs ou les fonctions fenêtre-sur-charge ce snippet fonctionne en réglant en mode Lecture seule et en passant en mode écriture si l'utilisateur focalise ce champ d'entrée (focus contient le clic de la souris et tabbing à travers les champs).
Pas de jQuery nécessaire, JavaScript.
Après beaucoup de lutte, j'ai trouvé que la solution est beaucoup plus simple que vous pourriez imaginer:
au lieu de autocomplete="off"
utilisez simplement autocomplete="false"
;)
essayez ceci...
$(document).ready(function () {
$('input').attr('autocomplete', 'false');
});
j'ai trébuché sur le comportement étrange du chrome autofill aujourd'hui. Il s'est avéré pour activer sur les champs appelés: "embed" et "postpassword" (remplir là login et mot de passe) sans raison apparente. Ces champs avaient déjà été mis en place.
Aucune des méthodes décrites semblait fonctionner. Aucune des méthodes de l'autre réponse ne fonctionnait aussi bien. Je suis venu sur ma propre idée en se basant sur la réponse de Steele (il aurait pu en fait avoir travaillé, mais je demande les données de poste fixe format dans ma demande):
avant le vrai mot de passe, ajoutez ces deux champs fictifs:
<input type='text' style='display: none'>
<input type='password' style='display: none'>
seulement celui-ci a finalement désactivé l'auto-remplir pour mon formulaire.
c'est une honte, que de désactiver un tel comportement de base est si dur et hacky.
Je ne suis pas en mesure d'obtenir mon Chrome pour Auto remplir automatiquement sur la page charge pour tester cela, mais vous pouvez essayer d'ajouter autocomplete="off"
à vos champs, puis enlever l'attribut sur la charge:
$(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 à en charge, il trouve toutes les entrées avec autofill, ajoute leur outerHTML et supprime l'original, tout en préservant la valeur et le nom (facilement changé pour préserver ID etc)
si cela préserve le texte auto-remplir, vous pouvez juste mettre
var text = ""; /* $(this).val(); */
de la forme originale où cela a été affiché, il affirme afin de préserver la saisie semi-automatique. :)
bonne chance!
une solution serait d'auto-remplir les entrées avec des caractères blancs, et de les avoir claires sur la mise au point.
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 le faire.
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 il n'y a jamais de caractère d'espace en eux, l'inconvénient est qu'il y a une petite possibilité que les valeurs auto-remplies puissent être 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 été récemment confronté à ce problème, et avec aucune solution simple puisque mes champs peuvent être pré-peuplés, je voulais partager un hack élégant que j'ai inventé en définissant le type de mot de passe dans l'événement prêt.
ne déclarez pas votre champ d'entrée comme 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);
autocomplete="off"
sur l'entrée en train de travailler sur Chrome V44 (et Canaries V47)
Un peu en retard à la fête... mais cela se fait facilement avec un peu de jQuery:
$(window).on('load', function() {
$('input:-webkit-autofill').each(function() {
$(this).after($(this).clone(true).val('')).remove();
});
});
Pros
- supprime le remplissage automatique du texte et la couleur de fond.
- conserve autocomplete sur le terrain.
- conserve tous les événements/données liés à l'élément d'entrée.
Cons
- flash rapide du champ auto-rempli sur la charge de page.
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
fields.val('');
}, 500);
Chrome password manager est à la recherche d'éléments d'entrée avec type="password"
et de remplir mot de passe enregistré. Il ignore également la propriété autocomplete="off"
.
voici le correctif pour le dernier 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)
la solution la plus facile, fournir une valeur de '' pour le champ Nom d'utilisateur (que vous pouvez encore appeler 'nom d'utilisateur').
si la valeur peut être remplie par des valeurs saisies par l'utilisateur, comme c'est habituellement le cas pour un formulaire que vous validez, donnez une valeur de '' lorsqu'elle n'est pas déjà définie. En PHP,
if(trim($username) == ''){$username = ' ';}
<input type='text' value = '$username' name = 'Username' />
je pense en fait autocompletion pour le nom d'utilisateur et le mot de passe offre effectivement l'accès à tous vos comptes à toute personne qui accède à votre ordinateur, peu importe à quel point vos mots de passe sont obscurs...
ma solution est basée sur la solution de l'utilisateur dsuess, qui n'a pas fonctionné dans IE pour moi, parce que j'ai dû cliquer une fois de plus dans la boîte de texte pour être en mesure de taper. C'est pourquoi je ne l'ai adapté qu'à 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 ajouter ceci:
.forceWhiteBackground {
background-color:white !important;
}
Jusqu'à présent, j'ai trouvé que celui-ci fonctionne, ayant à définir un délai de 1ms pour l'action à compléter 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 n'y a pas moyen d'attacher cette fonction à la mise à feu automatique de chrome, ou même, de la reclasser
Voici la dernière solution que j'ai découverte. Cela empêche Google de remplir les champs et de les mettre en surbrillance avant même d'avoir tapé quoi que ce soit. Fondamentalement, si vous mettez "display:none" sur le champ Google est assez intelligent pour l'ignorer et passer au champ suivant. Si vous mettez "visibilité:caché" bien qu'il le considère comme un champ dans la forme qui semble interférer avec ses calculs. Pas besoin de javascript.
<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>
Je n'aime pas utiliser setTimeout ou même avoir des entrées temporaires étranges. Donc, je suis venu avec cette.
il suffit de changer le type de champ de votre mot de passe en texte
<input name="password" type="text" value="">
et lorsque l'utilisateur se concentre sur l'entrée, changez-le à nouveau en mot de passe
$('input[name=password]').on('focus', function (e) {
$(e.target).attr('type', 'password');
});
son fonctionnement en utilisant le dernier Chrome (version 54.0.2840.71 (64 bits))
pas une belle solution, mais travaillé sur Chrome 56:
<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">
noter un espace sur la valeur. Et puis:
$(document).ready(function(){
setTimeout("$('#name').val('')",1000);
});
remplissage automatique fonctionne avec l'attribut name de l'input, donc, si vous définissez un nom pour une entrée comme "prénom", google chrome remplir.
si vous voulez le désactiver, utilisez un nom bizarre 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é le Js avec jQUery.
<form action="handlerfile.php" method="post">
<input type="text" id="1" onclick="$("#2").val($("#1").val())"/>
<input type="hidden" name="username" id="2">
</form>
Vous feriez mieux d'utiliser désactivé pour vos entrées, afin d'éviter l'auto-complétion.
<input type="password" ... disabled />