web-dev-qa-db-fra.com

"AutoComplete = Off" ne fonctionne pas sur le navigateur Google Chrome

Je sais qu'il existe une question similaire sur Stackoverflow, mais aucune des solutions proposées ne m'a fonctionné.

<form autocomplete="off" id="search_form" method="post" action="">
    <input autocomplete="off" type="text" />
</form>

Comme vous pouvez le constater, j'ai mis autocomplete=off à LA FOIS dans le formulaire et dans le champ de saisie, mais Google Chrome affiche toujours cette liste de saisie semi-automatique. Cela ne se produit pas dans d'autres navigateurs comme Firefox et Safari.

Toute autre solution que de mettre autocomplete=off sur la balise de formulaire?

htmlhtml5formsgoogle-chromehtml-form
19
user2492270

Cela est dû à une décision de conception prise par Chrome (on peut soutenir que tout utilisateur de Chrome veut ce comportement).

La raison en est ce que Google appelle priorité des circonscriptions :

  1. L'utilisateur est roi! Ce qu'ils veulent importe le plus.
  2. L'utilisateur souhaite utiliser un gestionnaire de mot de passe ou de remplissage automatique.
  3. L'application Web indique qu'elle ne veut pas que les valeurs de formulaire soient enregistrées.
  4. Le choix de l'utilisateur est plus important, les valeurs de formulaire sont donc conservées.

Il existe des moyens de contourner le problème, mais il est fort probable que ceux-ci seront résolus dans les futures versions de Chrome, car les développeurs de Chrome le considèrent comme un comportement correct et votre solution de contournement comme un bogue.

Même si votre solution de contournement fonctionne, elle crée un comportement déroutant pour l'utilisateur. Ils s'attendent à ce que la fonction de remplissage automatique fonctionne en fonction de leurs paramètres.

De nombreux utilisateurs ont déjà choisi d'ignorer les paramètres de saisie semi-automatique des applications avec des plug-ins ou des scripts qui suppriment tout type de complétion automatique = désactivée dans la page. Ils avaient déjà ce choix.

Vous feriez mieux de concevoir avec l'hypothèse selon laquelle l'auto-complétion peut fonctionner et rendre compte de cela.

Personnellement, je déteste ça quand les sites ne rappellent pas mon mot de passe et remplacent ceux qui utilisent des extensions de navigateur. Cependant, je crée également des applications pour mon travail et le rappel des mots de passe est considéré comme un risque pour la sécurité, puisqu'un utilisateur peut laisser sa machine déverrouillée. Selon mon opinion personnelle, les utilisateurs qui ne verrouillent pas leurs machines sont un problème pour le système informatique local, et non pour l'application. Ce dernier peut désactiver tous les mots de passe de saisie semi-automatique pour toutes les applications Web si leurs utilisateurs ne peuvent pas faire confiance.

Malheureusement, pour passer les contrôles de sécurité, certaines applications doivent encore désactiver la fonction de saisie semi-automatique. Il existe des moyens de le faire, mais elles sont toutes horribles. Le premier hack consiste à rendre le mot de passe complètement nouveau:

<input type="hidden" name="password" id="realPassword" />
<input type="password" name="{randomly generated}" 
    onchange="document.getElementById('realPassword').value = this.value" />

J'ai tout mis en ligne pour simplifier, mais cela devrait vous donner une idée du piratage - aucun plug-in ni aucun navigateur ne peut remplir automatiquement une entrée avec un nom complètement nouveau. 

Cette solution se casse si vous construisez correctement ARIA et les libellés (car cela permet au navigateur/à l’extension de rechercher et de remplir automatiquement les entrées à partir du libellé).

Donc, l'option 2, aussi horrible, consiste à attendre que le processus de saisie semi-automatique se soit déclenché, puis à effacer le champ:

<input type="text" name="username" 
    onchange="window.setTimeout(function() { 
        document.getElementById('password').value = ''; 
    }, 100)" />
<input type="password" id="password" />

Comme je l'ai dit, méchant.

12
Keith

C'est peut-être un bug de Google Chrome, vous ne pouvez pas tricher en créant une entrée cachée. La fonction de complétion automatique aura le premier texte saisi pour remplir les données.

<form autocomplete="off" id="search_form" method="post" action="">
    <input type="text" style="display:none" />
    <input autocomplete="off" type="text" />
</form>
6
Bedonkey

Cela semble être un problème récurrent dans Google Chrome, bien que l’ajout du remplissage automatique à la forme fait fonctionne dans ma version. Peut-être que dans les nouvelles versions, ce n'est plus le cas.

Ceci est un hack. Donnez à votre entrée un identifiant, disons foo, et en JavaScript:

if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) {
    setTimeout(function () {
        document.getElementById('foo').autocomplete = 'off';
    }, 1);
}

Vérifiez si cela fonctionne pour vous. Le seul inconvénient est que pour ceux qui utilisent Chrome et ont JavaScript désactivé, le champ serait toujours rempli automatiquement.

1
federicot

L'attribut autocomplete est nouveau dans HTML5.

Étant donné que vous n'avez pas mentionné la DOCTYPE, je pense que c'est la seule raison possible qui pourrait être la suivante. Pour plus d'informations, consultez MDN. Comment désactiver le remplissage automatique de formulaire .

Essayez d’ajouter le HTML5 DOCTYPE suivant.

<!DOCTYPE html>

FYI: Dans certains navigateurs, il peut être nécessaire d'activer une fonction autocomplete pour pour que cela fonctionne (voir "Préférences" dans le menu du navigateur).

Vous êtes en l'utilisant correctement en mentionnant l'attribut autocomplete sous l'élément form}. Cependant, vous n'avez pas besoin de le mentionner séparément pour la balise input.

<form autocomplete="off" id="search_form" method="post" action="">
    <input type="text" />
</form>

Mise à jour: Vous trouverez ici une liste de solutions dans l'attribut autocomplete et les documents Web utilisant XHTML .

0
Praveen

essayez cela, a travaillé pour moi après avoir déconné un peu

if ( navigator.userAgent.toLowerCase().indexOf('chrome') >= 0 ) {
    $('input[autocomplete="off"]').each( function(){
        var type = $(this).attr( 'type');
        $(this).attr( 'type', '_' + type );
        $(this).attr( 'type', type );
    });
}
0
Luke Snowden

si vous utilisez AJAX, appelez pour soumettre des données au serveur. Après avoir terminé l'appel AJAX, les champs du mot de passe doivent être effacés. Ensuite, l'invite de sauvegarde du mot de passe ne sera pas affichée.

Par exemple: $ (# Foo) .val ("");

0
Sirikumara