html - Comment désactiver la saisie semi-automatique du navigateur sur le champ de formulaire Web / la balise de saisie?

Translate

Comment désactiverautocompletedans les principaux navigateurs pour uninput(ouform field)?

This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

Firefox 30 ignoreautocomplete="off"pour les mots de passe, en choisissant plutôt de demander à l'utilisateur si le mot de passe doit être stocké sur le client. Notez ce qui suitcommentaireà partir du 5 mai 2014:

  • Le gestionnaire de mots de passetoujoursvous demande s'il souhaite enregistrer un mot de passe. Les mots de passe ne sont pas enregistrés sans l'autorisation de l'utilisateur.
  • Nous sommes le troisième navigateur à mettre en œuvre ce changement, après IE et Chrome.

Selon leRéseau de développeurs Mozilladocumentation, l'attribut d'élément de formulaire booléenautocompleteempêche la mise en cache des données de formulaire dans les anciens navigateurs.

<input type="text" name="foo" autocomplete="off" />
La source
Translate

En plus deautocomplete=off, vous pouvez également faire en sorte que les noms de vos champs de formulaire soient randomisés par le code qui génère la page, peut-être en ajoutant une chaîne spécifique à la session à la fin des noms.

Lorsque le formulaire est soumis, vous pouvez retirer cette partie avant de la traiter côté serveur. Cela empêcherait le navigateur Web de trouver le contexte de votre champ et pourrait également aider à prévenir les attaques XSRF car un attaquant ne serait pas en mesure de deviner les noms de champ pour une soumission de formulaire.

La source
Translate

La plupart des principaux navigateurs et gestionnaires de mots de passe (correctement, à mon humble avis) ignorent maintenantautocomplete=off.

Pourquoi? Ajout de nombreuses banques et autres sites Web «haute sécurité»autocomplete=offà leurs pages de connexion "pour des raisons de sécurité", mais cela diminue en fait la sécurité car cela amène les gens à changer les mots de passe sur ces sites de haute sécurité pour être faciles à retenir (et donc craquer) puisque la saisie semi-automatique a été interrompue.

Il y a longtemps, la plupart des gestionnaires de mots de passe ont commencé à ignorerautocomplete=off, et maintenant les navigateurs commencent à faire de même pour les entrées de nom d'utilisateur / mot de passe uniquement.

Malheureusement, des bogues dans les implémentations de saisie semi-automatique insèrent des informations de nom d'utilisateur et / ou de mot de passe dans des champs de formulaire inappropriés, provoquant des erreurs de validation de formulaire, ou pire encore, l'insertion accidentelle de noms d'utilisateur dans des champs intentionnellement laissés vides par l'utilisateur.

Que doit faire un développeur Web?

  • Si vous pouvez conserver tous les champs de mot de passe sur une page par eux-mêmes, c'est un bon début car il semble que la présence d'un champ de mot de passe soit le principal déclencheur de la saisie semi-automatique de l'utilisateur / pass. Sinon, lisez les conseils ci-dessous.
  • Safariremarque qu'il y a 2 champs de mot de passe et désactive la saisie semi-automatique dans ce cas, en supposant qu'il doit s'agir d'un formulaire de changement de mot de passe et non d'un formulaire de connexion. Assurez-vous donc d'utiliser 2 champs de mot de passe (nouveau et confirmer nouveau) pour tous les formulaires où vous autorisez
  • Chrome34, malheureusement, essaiera de remplir automatiquement les champs avec user / pass chaque fois qu'il verra un champ de mot de passe. C'est un bug assez grave qui, espérons-le, changera le comportement de Safari. Cependant, l'ajout de ceci en haut de votre formulaire semble désactiver la saisie automatique du mot de passe:

    <input type="text" style="display:none">
    <input type="password" style="display:none">
    

Je n'ai pas encore étudié à fond IE ou Firefox, mais je serai heureux de mettre à jour la réponse si d'autres ont des informations dans les commentaires.

La source
Translate

parfoismême autocomplete = offauraitpas empêcher de remplirdans les informations d'identification dans de mauvais champs, mais pas dans le champ d'utilisateur ou de surnom.

Cette solution de contournement s'ajoute à l'article d'apinstein sur le comportement du navigateur.

correction de la saisie automatique du navigateur en lecture seule et mise en écriture sur le focus (clic et tabulation)

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

Mise à jour: Mobile Safari place le curseur dans le champ, mais n'affiche pas le clavier virtuel. New Fix 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 directhttps://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Parce que le navigateur remplit automatiquement les informations d'identification dans le mauvais champ de texte !?

Je remarque ce comportement étrange sur Chrome et Safari, quand il y a des champs de mot de passe dansla même forme.Je suppose que le navigateur recherche un champ de mot de passe pour insérer vos informations d'identification enregistrées. Ensuite, il remplit automatiquement (en devinant simplement en raison de l'observation) le champ de saisie de texte le plus proche, qui apparaît avant le champ de mot de passe dans DOM. Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,

Ce correctif en lecture seule ci-dessus a fonctionné pour moi.

La source
Translate
<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

Cela fonctionnera dans Internet Explorer et Mozilla FireFox, l'inconvénient est que ce n'est pas le standard XHTML.

La source
Translate

La solution pour Chrome est d'ajouterautocomplete="new-password"au mot de passe du type d'entrée.

Exemple:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

Chrome remplit toujours automatiquement les données s'il trouve une boîte detapez votre mot de passe, juste assez pour indiquer pour cette caseautocomplete = "new-password".

Cela fonctionne bien pour moi.

Remarque: assurez-vous avec F12 que vos modifications prennent effet, souvent les navigateurs enregistrent la page dans le cache, cela m'a donné une mauvaise impression que cela ne fonctionnait pas, mais le navigateur n'a pas réellement apporté les modifications.

La source
Translate

Comme d'autres l'ont dit, la réponse estautocomplete="off"

Cependant, je pense qu'il vaut la peine de direPourquoic'est une bonne idée d'utiliser ceci dans certains cas comme réponses à ceci etdupliquerdes questions suggèrent qu'il vaut mieux ne pas l'éteindre.

L'arrêt des navigateurs stockant les numéros de carte de crédit ne devrait pas être laissé aux utilisateurs. Trop d'utilisateurs ne réaliseront même pas que c'est un problème.

Il est particulièrement important de le désactiver dans les champs des codes de sécurité des cartes de crédit. Commecette pageÉtats:

"Ne stockez jamais le code de sécurité ... sa valeur dépend de la présomption que la seule façon de le fournir est de le lire sur la carte de crédit physique, prouvant que la personne qui le fournit détient effectivement la carte."

Le problème est que s'il s'agit d'un ordinateur public (cybercafé, bibliothèque, etc.), il est alors facile pour les autres utilisateurs de voler les détails de votre carte, et même sur votre propre machine, un site Web malveillant pourraitvoler des données de saisie semi-automatique.

La source
Translate

Je devrais prier de ne pas être d'accord avec ces réponses qui disent d'éviter de désactiver la saisie semi-automatique.

La première chose à signaler est que l'auto-complétion n'étant pas explicitement désactivée dans les champs du formulaire de connexion est un échec PCI-DSS. De plus, si la machine locale d'un utilisateur est compromise, toutes les données de saisie semi-automatique peuvent être facilement obtenues par un attaquant car elles sont stockées en clair.

Il y a certainement un argument en faveur de la convivialité, mais il y a un très bon équilibre entre les champs de formulaire qui devraient avoir la saisie semi-automatique désactivée et lesquels ne le devraient pas.

La source
Translate

Trois options: Premièrement:

<input type='text' autocomplete='off' />

Seconde:

<form action='' autocomplete='off'>

Troisième (code javascript):

$('input').attr('autocomplete', 'off');
La source
Translate

J'ai résolu le combat sans fin avec Google Chrome avec l'utilisation de caractères aléatoires. Lorsque vous effectuez toujours le rendu automatique avec une chaîne aléatoire, il ne se souviendra de rien.

<input name="name" type="text" autocomplete="rutjfkde">

J'espère que cela aidera d'autres personnes.

La source
Translate

Sur une note liée ou en fait, sur la note complètement opposée -

"Si vous êtes l'utilisateur du formulaire susmentionné et que vous souhaitez réactiver la fonctionnalité de saisie semi-automatique, utilisez le bookmarklet" Mémoriser le mot de passe "de cepage de bookmarklets. Il supprime toutautocomplete="off"attributs de tous les formulaires de la page. Continuez à combattre le bon combat! "

La source
Translate

Nous avons effectivement utilisésasbl'idée d'un site. C'était une application Web de logiciel médical pour gérer le cabinet d'un médecin. Cependant, bon nombre de nos clients étaient des chirurgiens qui utilisaient de nombreux postes de travail différents, y compris des terminaux semi-publics. Ainsi, ils voulaient s'assurer qu'un médecin qui ne comprend pas l'implication des mots de passe enregistrés automatiquement ou qui ne fait pas attention ne puisse pas accidentellement laisser ses informations de connexion facilement accessibles. Bien sûr, c'était avant l'idée de la navigation privée qui commence à être présentée dans IE8, FF3.1, etc. Malgré cela, de nombreux médecins sont obligés d'utiliser des navigateurs de la vieille école dans les hôpitaux avec une informatique qui ne changera pas.

Nous avons donc demandé à la page de connexion de générer des noms de champs aléatoires qui ne fonctionneraient que pour ce message. Oui, c'est moins pratique, mais cela ne fait que frapper l'utilisateur sur la tête de ne pas stocker les informations de connexion sur les terminaux publics.

La source
Translate

Juste régléautocomplete="off". Il y a une très bonne raison à cela: vous souhaitez fournir votre propre fonctionnalité de saisie semi-automatique!

La source
Translate

J'ai essayé des solutions sans fin, puis j'ai trouvé ceci:

Au lieu deautocomplete="off"utilisez simplementautocomplete="false"

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

La source
Translate

je penseautocomplete=offest pris en charge dans HTML 5.

Demandez-vous pourquoi vous voulez faire cela - cela peut avoir du sens dans certaines situations, mais ne le faites pas juste pour le faire.

C'est moins pratique pour les utilisateurs et même pas un problème de sécurité sous OS X (mentionné par Soren ci-dessous). Si vous craignez que des personnes se voient voler leur mot de passe à distance, un enregistreur de frappe peut toujours le faire même si votre application utiliseautcomplete=off.

En tant qu'utilisateur qui choisit d'avoir un navigateur se souvienne de (la plupart de) mes informations, je trouverais ennuyeux que votre site ne se souvienne pas des miennes.

La source
Translate

Aucune des solutions n'a fonctionné pour moi dans cette conversation.

J'ai finalement compris unsolution HTML purecela exigepas de Javascript, fonctionne dans les navigateurs modernes (sauf IE; il fallait au moins 1 capture, non?), et ne vous oblige pas à désactiver la saisie semi-automatique pour tout le formulaire.

Désactivez simplement la saisie semi-automatique sur leformpuis allumez-le pour toutinputvous souhaitez qu'il fonctionne dans le formulaire. Par exemple:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>
La source
Translate

Cela fonctionne pour moi.

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

Nous pouvons également utiliser cette stratégie dans d'autres contrôles comme le texte, sélectionner, etc.

La source
Translate

Un peu tard dans le jeu ... mais je viens de rencontrer ce problème et j'ai essayé plusieurs échecs, mais celui-ci fonctionne pour moi trouvé surMDN

Dans certains cas, le navigateur continuera à suggérer des valeurs de saisie semi-automatique même si l'attribut de saisie semi-automatique est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. L'astuce pour vraiment forcer la non-complétion est d'assigner une chaîne aléatoire à l'attribut comme ceci:

autocomplete="nope"
La source
Translate

La meilleure solution:

Empêchez le nom d'utilisateur (ou e-mail) et le mot de passe de saisie semi-automatique:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Empêcher la saisie semi-automatique d'un champ:

<input type="text" name="field" autocomplete="nope">

Explication:autocompletecontinue de travailler dans<input>, autocomplete="off"ne fonctionne pas, mais vous pouvez changeroffà une chaîne aléatoire, commenope.

Travaille dans:

  • Chrome: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 et 64

  • Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 et 58

La source
Translate

Essayez d'ajouter

readonly onfocus = "this.removeAttribute ('readonly');"

en plus de

autocomplete = "off"

aux entrées dont vous ne souhaitez pas mémoriser les données du formulaire (username, password, etc.) comme indiqué ci-dessous:

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

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >


Mettre à jour:Voici un exemple complet ci-dessous basé sur cette approche qui empêche deglisser-déposer, copie, pâte, etc.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Testé sur les dernières versions des principaux navigateurs ieGoogle Chrome, Mozilla Firefox, Microsoft Edge, etc. et fonctionnant sans problème. J'espère que cela t'aides...

La source
Translate

Ajout du

autocomplete="off"

à la balise form désactivera la saisie semi-automatique du navigateur (ce qui était précédemment saisi dans ce champ) de tousinputchamps dans ce formulaire particulier.

Testé sur:

  • Firefox 3.5, 4 BÊTA
  • Internet Explorer 8
  • Chrome
La source
Translate

Utilisez un nom et un identifiant non standard pour les champs, donc plutôt que "nom", ayez "nom_". Les navigateurs ne le verront alors pas comme étant le champ de nom. La meilleure partie à ce sujet est que vous pouvez le faire pour certains champs, mais pas tous, et cela remplira automatiquement certains champs mais pas tous.

La source
Translate

Afin d'éviter le XHTML invalide, vous pouvez définir cet attribut en utilisant javascript. Exemple utilisant jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Le problème est que les utilisateurs sans javascript obtiendront la fonctionnalité de saisie semi-automatique.

La source
Translate

Ajouterautocomplete="off"ne va pas le couper.

Remplacez l'attribut du type d'entrée partype="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.

La source
Translate

essayez-les aussi si justeautocomplete="off"ne fonctionne pas:

autocorrect="off" autocapitalize="off" autocomplete="off"
La source
Ben
Translate

Je ne peux pas croire que ce soit encore un problème si longtemps après qu'il ait été signalé. Les solutions ci-dessus ne fonctionnaient pas pour moi, car safari semblait savoir quand l'élément n'était pas affiché ou hors écran, mais ce qui suit a fonctionné pour moi:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

J'espère que c'est utile pour quelqu'un!

La source
Translate

Il s'agit d'un problème de sécurité que les navigateurs ignorent maintenant. Les navigateurs identifient et stockent le contenu à l'aide de noms d'entrée, même si les développeurs considèrent que les informations sont sensibles et ne doivent pas être stockées. Faire un nom d'entrée différent entre 2 requêtes résoudra le problème (mais sera toujours enregistré dans le cache du navigateur et augmentera également le cache du navigateur). Demander à l'utilisateur d'activer ou de désactiver des options dans les paramètres de son navigateur n'est pas une bonne solution. Le problème peut être résolu dans le backend.

Voici ma solution. Une approche que j'ai implémentée dans mon cadre. Tous les éléments de saisie semi-automatique sont générés avec une entrée masquée comme celle-ci:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Le serveur traite ensuite les variables de publication comme ceci:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

La valeur est accessible comme d'habitude

var_dump($_POST['username']);

Et le navigateur ne pourra pas suggérer les informations de la demande précédente ou des utilisateurs précédents.

Tout fonctionne comme un charme, même si les mises à jour des navigateurs, veulent ignorer la saisie semi-automatique ou non. Cela a été la meilleure façon de résoudre le problème pour moi.

La source
Translate

Aucun des hacks mentionnés ici n'a fonctionné pour moi dans Chrome. Il y a une discussion sur la question ici:https://code.google.com/p/chromium/issues/detail?id=468153#c41

L'ajout de ceci dans un<form>fonctionne (au moins pour l'instant):

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

Alors voilà:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">
La source
Translate

Vous pouvez utiliser en entrée.

Par exemple;

<input type=text name="test" autocomplete="off" />
La source