Désactivation de Chrome Remplissage automatique
Je rencontrais des problèmes avec le comportement de remplissage automatique chrome sous plusieurs formulaires.
Les champs du formulaire ont tous des noms très communs et précis, tels que "email", "nom" ou "mot de passe", et ils ont également autocomplete="off" set.
L'indicateur de saisie semi-automatique a correctement désactivé le comportement de saisie semi-automatique, où une liste de valeurs apparaît lorsque vous commencez à taper, mais n'a pas changé les valeurs que Chrome remplit automatiquement les champs.
Ce comportement serait correct, sauf que chrome saisit les entrées de manière incorrecte, par exemple, en saisissant l'entrée de téléphone avec une adresse électronique. Les clients se sont plaints à ce sujet. Il a donc été vérifié que cela se produisait dans de nombreux cas, et non comme un résultat quelconque de ce que j'ai déjà fait localement sur ma machine.
La seule solution actuelle à laquelle je puisse penser est de générer de manière dynamique des noms d’entrée personnalisés, puis d’extraire les valeurs sur le back-end, mais cela semble être un moyen assez compliqué de résoudre ce problème. Existe-t-il des balises ou des bizarreries modifiant le comportement de remplissage automatique pouvant être utilisées pour résoudre ce problème?
Pour les nouvelles versions Chrome, vous pouvez simplement mettre autocomplete="new-password" dans votre champ de mot de passe et le tour est joué. Je l'ai vérifié, ça fonctionne bien.
Vous avez eu cette astuce de Chrome développeur dans cette discussion: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
P.S. N'oubliez pas d'utiliser des noms uniques pour différents champs afin d'éviter le remplissage automatique.
Je viens de découvrir que si vous avez un nom d'utilisateur et un mot de passe mémorisés pour un site, la version actuelle de Chrome remplira automatiquement votre nom d'utilisateur/adresse e-mail dans le champ précédant tout champ type=password. Peu importe le nom du champ, il suppose que le champ avant que le mot de passe ne soit votre nom d'utilisateur.
ancienne solution
Il vous suffit d'utiliser <form autocomplete="off"> pour éviter le préremplissage du mot de passe, ainsi que tout type de remplissage heuristique de champs basé sur les hypothèses que peut générer un navigateur (qui sont souvent fausses). Contrairement à l'utilisation de <input autocomplete="off"> qui semble être pratiquement ignorée par la saisie automatique du mot de passe (dans Chrome, c'est-à-dire que Firefox y obéit).
Solution mise à jour
Chrome ignore maintenant <form autocomplete="off">. Par conséquent, ma solution de contournement d'origine (que j'avais supprimée) fait maintenant fureur.
Créez simplement quelques champs et masquez-les avec "display: none". Exemple:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Ensuite, placez vos vrais champs en dessous.
N'oubliez pas d'ajouter le commentaire, sinon d'autres personnes de votre équipe se demanderont ce que vous faites!
Mise à jour mars 2016
Vient de tester avec le dernier Chrome - tout va bien. C’est une réponse assez ancienne à présent, mais je tiens à mentionner que notre équipe l’utilise depuis des années pour des dizaines de projets. Cela fonctionne toujours très bien malgré quelques commentaires ci-dessous. L'accessibilité ne pose aucun problème car les champs sont display:none, ce qui signifie qu'ils ne sont pas activés. Comme je l'ai mentionné, vous devez les mettre avant vos champs réels.
Si vous utilisez javascript pour modifier votre formulaire, vous aurez besoin d'une astuce supplémentaire. Affichez les faux champs pendant que vous manipulez le formulaire, puis masquez-les à nouveau une milliseconde plus tard.
Exemple de code utilisant jQuery (en supposant que vous donniez une classe à vos faux champs):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
Mise à jour juillet 2018
Ma solution ne fonctionne plus très bien depuis que les experts en anti-utilisabilité de Chrome travaillent d'arrache-pied. Mais ils nous ont jeté un os sous la forme de:
<input type="password" name="whatever" autocomplete="new-password" />
Cela fonctionne et résout principalement le problème.
Cependant, cela ne fonctionne pas si vous ne disposez pas d'un champ de mot de passe mais seulement d'une adresse électronique. Cela peut également être difficile à faire cesser de jaunir et de pré-remplir. La solution de faux champs peut être utilisée pour résoudre ce problème.
En fait, vous devez parfois déposer deux lots de faux champs et les essayer dans des endroits différents. Par exemple, j'avais déjà de faux champs au début de mon formulaire, mais Chrome a récemment commencé à pré-remplir à nouveau mon champ "Email". champ, et qui l'a corrigé. Si vous supprimez le premier ou le second lot de champs, le remplissage automatique par zèle est incorrect.
Après des mois et des mois de lutte, j'ai trouvé que la solution est beaucoup plus simple que vous ne pouvez l'imaginer:
Au lieu de _autocomplete="off"_, utilisez autocomplete="false";)
Aussi simple que cela, et cela fonctionne comme un charme dans Google Chrome aussi!
Parfois, même autocomplete=off n'empêchera pas de renseigner les informations d'identification dans les champs incorrects.
Une solution de contournement consiste à désactiver le remplissage automatique du navigateur à l'aide du mode lecture seule et à définir le focus en écriture sur le focus:
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
L'événement focus se produit par un clic de souris ou par une tabulation dans les champs.
Mise à jour:
Mobile Safari définit le curseur dans le champ, mais n'affiche pas le clavier virtuel. Cette nouvelle solution de contournement 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: Le navigateur remplit automatiquement les informations d'identification avec un champ de texte incorrect?
remplir les entrées de manière incorrecte, par exemple, saisir l'entrée de téléphone avec une adresse électronique
Parfois, je remarque ce comportement étrange sur Chrome et Safari, lorsqu'il existe des champs de mot de passe dans sur le même formulaire. Je suppose que le navigateur recherche un champ de mot de passe insérez vos informations d'identification sauvegardées. Ensuite, il remplit automatiquement le nom d'utilisateur dans le champ de saisie textlike le plus proche, qui apparaît avant le champ de mot de passe dans DOM. (deviner juste en raison de l'observation). Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,
Ce correctif en lecture seule a fonctionné pour moi.
Si vous implémentez une fonctionnalité de champ de recherche, essayez de définir l'attribut type sur search comme suit:
<input type="search" autocomplete="off" />
Cela fonctionne pour moi sur Chrome v48 et semble être un balisage légitime:
Essaye ça. Je sais que la question est un peu ancienne, mais il s’agit d’une approche différente du problème.
J'ai également remarqué que le problème venait juste au-dessus du champ password.
J'ai essayé les deux méthodes comme
<form autocomplete="off"> et <input autocomplete="off"> mais aucun d'entre eux n'a fonctionné pour moi.
Je l'ai donc corrigé à l'aide de l'extrait ci-dessous - je viens d'ajouter un autre champ de texte juste au-dessus du champ de type de mot de passe et de le rendre display:none.
Quelque chose comme ça:
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />
J'espère que ça va aider quelqu'un.
Je ne sais pas pourquoi, mais cela m'a aidé et travaillé.
<input type="password" name="pwd" autocomplete="new-password">
Je ne sais pas pourquoi, mais autocompelete = "new-password" désactive le remplissage automatique. Cela a fonctionné dans la dernière version 49.0.2623.112 chrome.
Pour moi, simple
<form autocomplete="off" role="presentation">
L'a fait.
Testé sur plusieurs versions, le dernier essai a eu lieu 56.0.2924.87
C'est tellement simple et délicat :)
google chrome recherche essentiellement chaque premier élément de mot de passe visible à l'intérieur des balises <form>, <body> et <iframe> pour leur permettre la recharge automatique, donc pour le désactiver, vous devez ajouter un élément de mot de passe factice comme suit:
si votre élément de mot de passe se trouve dans une balise
<form>, vous devez placer l'élément factice en tant que premier élément de votre formulaire immédiatement après la balise<form>opensi votre élément de mot de passe ne se trouve pas dans une balise
<form>, placez l'élément factice en tant que premier élément de votre page html immédiatement après la balise<body>open
Vous devez masquer l'élément factice sans utiliser css
display:none, aussi utilisez-vous les éléments suivants comme élément de mot de passe factice.<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
Voici les solutions que je propose, car Google insiste pour passer outre à toutes les solutions de rechange que les gens semblent prendre.
Option 1 - sélectionner tout le texte au clic
Définissez les valeurs des entrées sur un exemple pour votre utilisateur (par exemple [email protected]) ou l'étiquette du champ (par exemple Email) et ajoutez une classe appelée focus-select à vos entrées:
<input type="text" name="email" class="focus-select" value="[email protected]">
<input type="password" name="password" class="focus-select" value="password">
Et voici le jQuery:
$(document).on('click', '.focus-select', function(){
$(this).select();
});
Je ne vois vraiment pas Chrome jouer avec les valeurs. Ce serait fou. J'espère donc que c'est une solution sûre.
Option 2 - définissez la valeur de courrier électronique sur un espace, puis supprimez-le
En supposant que vous ayez deux entrées, telles que email et mot de passe, définissez la valeur du champ email sur " " (espace) et ajoutez l'attribut/valeur autocomplete="off", puis effacez-la avec JavaScript. Vous pouvez laisser la valeur du mot de passe vide.
Si l'utilisateur ne dispose pas de JavaScript pour une raison quelconque, assurez-vous de couper son entrée côté serveur (vous devriez probablement l'être de toute façon), au cas où il ne supprime pas l'espace.
Voici le jQuery:
$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});
J'ai réglé le délai d'attente sur 15 parce que 5 semblait fonctionner de temps en temps dans mes tests, donc le fait de diviser par trois ce nombre semble être une valeur sûre.
Si vous ne définissez pas la valeur initiale sur un espace, Chrome laisse l'entrée en jaune, comme si elle l'avait automatiquement remplie.
Option 3 - entrées cachées
Mettez ceci au début du formulaire:
<!-- Avoid Chrome autofill -->
<input name="email" class="hide">
CSS:
.hide{ display:none; }
Veillez à conserver la note HTML afin que vos autres développeurs ne la suppriment pas! Assurez-vous également que le nom de l'entrée masquée est pertinent.
Dans certains cas, le navigateur continue à suggérer des valeurs de complétion automatique même si l'attribut autocomplete est défini sur off. Ce comportement inattendu peut être assez déroutant pour les développeurs. Le truc pour vraiment forcer la non-complétion automatique est pour assigner une chaîne aléatoire à l'attribut, par exemple:
autocomplete="nope"
J'ai constaté que l'ajout de cette information à un formulaire empêche Chrome d'utiliser la fonction de remplissage automatique.
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
Trouvé ici. https://code.google.com/p/chromium/issues/detail?id=468153#hc41
Vraiment décevant que Chrome ait décidé qu'il en savait plus que le développeur sur le moment de la saisie semi-automatique. A une vraie sensation Microsoft.
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
ajouter l'attribut readonly à la balise avec l'événement onfocus qui le supprime résout le problème
Pour les combinaisons de nom d'utilisateur et de mot de passe, il s'agit d'un problème facile à résoudre. Chrome l'heuristique recherche le modèle:
<input type="text">
suivi par:
<input type="password">
Casser simplement ce processus en invalidant ceci:
<input type="text">
<input type="text" onfocus="this.type='password'">
Utilisez css text-security: disc sans utiliser type = password.
html
<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />
or
<form autocomplete='off'>
<input type='text' name='user' />
<input type='text' name='pass' class='secure' />
</form>
css
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
La solution fournie par Mike Nelsons ne fonctionnait pas pour moi dans Chrome 50.0.2661.102 m. Ajouter simplement un élément d’entrée du même type avec display: aucun réglage ne désactive plus la saisie automatique du navigateur natif. Il est maintenant nécessaire de dupliquer l'attribut name du champ de saisie sur lequel vous souhaitez désactiver la saisie automatique.
De même, pour éviter que le champ de saisie ne soit dupliqué lorsqu'il se trouve dans un élément de formulaire, vous devez placer un élément désactivé sur l'élément qui n'est pas affiché. Cela évitera que cet élément soit soumis dans le cadre de l'action de formulaire.
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
En 2016, Google Chrome a commencé à ignorer autocomplete=off alors qu'il se trouve dans le W3C. La réponse qu'ils ont postée :
La difficulté réside dans le fait qu’autour du Web, la fonction autocomplete = off devient un paramètre par défaut pour de nombreux champs de formulaire, sans que l’on se soit vraiment demandé si cela était avantageux ou non pour les utilisateurs. Cela ne signifie pas qu'il n'y a pas de cas très valables dans lesquels vous ne souhaitez pas que le navigateur remplisse automatiquement les données (par exemple, sur les systèmes CRM), mais dans l'ensemble, nous les considérons comme des cas minoritaires. Et par conséquent, nous avons commencé à ignorer autocomplete = off pour Chrome Remplissage automatique des données.
Ce qui dit essentiellement: nous savons mieux ce qu'un utilisateur veut.
Je n'ai pas rencontré de problèmes liés à la saisie semi-automatique dans l'ensemble de mon application B2B, mais uniquement à la saisie d'un type de mot de passe.
La saisie automatique intervient s’il existe un champ de mot de passe à l’écran, même caché. Pour casser cette logique, vous pouvez mettre chaque champ de mot de passe dans son propre formulaire s'il ne casse pas votre propre logique de page.
<input type=name >
<form>
<input type=password >
</form>
Si vous ne parvenez pas à conserver des espaces réservés mais à désactiver le remplissage automatique chrome, j'ai trouvé cette solution de contournement.
Problème
HTML
<div class="form">
<input type="text" placeholder="name"><br>
<input type="text" placeholder="email"><br>
<input type="text" placeholder="street"><br>
</div>
http://jsfiddle.net/xmbvwfs6/1/
L'exemple ci-dessus génère toujours le problème de remplissage automatique, mais si vous utilisez le required="required" et certains CSS, vous pouvez répliquer les espaces réservés et Chrome ne récupérera pas les balises.
Solution
HTML
<div class="form">
<input type="text" required="required">
<label>Name</label>
<br>
<input type="text" required="required">
<label>Email</label>
<br>
<input type="text" required="required">
<label>Street</label>
<br>
</div>
CSS
input {
margin-bottom: 10px;
width: 200px;
height: 20px;
padding: 0 10px;
font-size: 14px;
}
input + label {
position: relative;
left: -216px;
color: #999;
font-size: 14px;
}
input:invalid + label {
display: inline-block;
}
input:valid + label {
display: none;
}
Les valeurs précédemment entrées et mises en cache par chrome sont affichées sous forme de liste de sélection déroulante. Elles peuvent être désactivées par autocompléte = off, l'adresse explicitement enregistrée dans les paramètres avancés de chrome donne un message à remplir automatiquement lorsqu'un champ focus.Cela peut être désactivé par autocomplete = "false" .Mais cela permettra à chrome d'afficher les valeurs en cache dans la liste déroulante.
Sur un champ HTML d’entrée, les deux suivants sont désactivés.
Role="presentation" & autocomplete="off"
Lors de la sélection des champs de saisie pour le remplissage automatique d’adresses, Chrome ignore les champs de saisie pour lesquels l’élément HTML précédent n’est pas étiqueté.
Pour s'assurer que chrome l'analyseur ignore un champ de saisie pour le remplissage automatique des adresses, un bouton ou un contrôle d'image masqué peut être ajouté entre label et zone de texte. Ceci cassera chrome séquence d'analyse de la création d'une paire étiquette-entrée pour le remplissage automatique. Les cases à cocher sont ignorées lors de l'analyse des champs d'adresse
Chrome considère également l'attribut "for" sur l'élément d'étiquette. Il peut être utilisé pour rompre la séquence d’analyse de chrome.
En réglant autocomplete sur off devrait fonctionner ici, j'ai un exemple qui est utilisé par Google dans la page de recherche. J'ai trouvé cela de l'élément inspect.
edit : Si off ne fonctionne pas, essayez alors false ou nofill. Dans mon cas, cela fonctionne avec chrome version 48.0
Depuis que nous avons tous ce problème, j’ai investi du temps pour écrire une extension jQuery fonctionnelle pour ce problème. Google doit suivre le balisage HTML, pas nous suivons Google
(function ($) {
"use strict";
$.fn.autoCompleteFix = function(opt) {
var ro = 'readonly', settings = $.extend({
attribute : 'autocomplete',
trigger : {
disable : ["off"],
enable : ["on"]
},
focus : function() {
$(this).removeAttr(ro);
},
force : false
}, opt);
$(this).each(function(i, el) {
el = $(el);
if(el.is('form')) {
var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
el.find('input').autoCompleteFix({force:force});
} else {
var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
if (settings.force && !enabled || disabled)
el.attr(ro, ro).focus(settings.focus).val("");
}
});
};
})(jQuery);
Ajoutez simplement ceci à un fichier tel que /js/jquery.extends.js et incluez-le au-delà de jQuery. Appliquez-le à chaque élément de formulaire au chargement du document comme ceci:
$(function() {
$('form').autoCompleteFix();
});
Je n'aimais vraiment pas faire des champs cachés, je pense que le faire comme ça va être très déroutant très vite.
Cela fonctionnera sur les champs de saisie que vous souhaitez arrêter de compléter automatiquement. Rendre les champs en lecture seule et sur focus supprimer cet attribut comme ceci
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
ce que cela signifie, c'est que vous devez d'abord supprimer le attribut de lecture seule en sélectionnant le champ et à ce moment-là, vous aurez probablement des informations à saisir avec votre propre entrée utilisateur et en baissant le remplissage automatique prendre en charge, prendre le contrôle
Il y a deux pièces à cela. Chrome et les autres navigateurs se souviendront des valeurs précédemment entrées pour les noms de champs et fourniront à l'utilisateur une liste de complétion automatique basée sur celle-ci (notamment, les entrées de type de mot de passe sont jamais mémorisées de cette manière, pour des raisons assez évidentes). Vous pouvez ajouter autocomplete="off" pour éviter cela, par exemple dans votre champ de courrier électronique.
Cependant, vous avez alors des remplisseurs de mot de passe. La plupart des navigateurs ont leurs propres implémentations intégrées et de nombreux utilitaires tiers fournissent cette fonctionnalité. Ceci, vous ne pouvez pas arrêter. Il appartient à l'utilisateur de choisir lui-même de sauvegarder ces informations pour les renseigner automatiquement plus tard, ce qui sort complètement du cadre et de la sphère d'influence de votre application.
Solution différente, basée sur un kit Web. Comme déjà mentionné, à tout moment, Chrome trouve un champ de mot de passe qui complète automatiquement le courrier électronique. Autant que je sache, ceci est indépendant de l'auto-complétion = [peu importe].
Pour contourner ce problème, changez le type de saisie en texte et appliquez la police de sécurité webkit sous la forme de votre choix.
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
D'après ce que je peux voir, il est au moins aussi sécurisé que le type d'entrée = mot de passe, il s'agit d'un copier/coller sécurisé. Cependant, il est vulnérable en supprimant le style qui supprimera les astérisques. Bien sûr, input type = mot de passe peut facilement être changé en input type = text dans la console pour afficher tous les mots de passe remplis automatiquement.
Selon rapport de bogue Chromium n ° 352347 Chrome ne respecte plus autocomplete="off|false|anythingelse", ni sur les formulaires ni sur les entrées.
La seule solution qui a fonctionné pour moi a été d'ajouter un champ de mot de passe factice :
<input type="password" class="hidden" />
<input type="password" />
Voici un sale bidouille -
Vous avez votre élément ici (en ajoutant l'attribut disabled):
<input type="text" name="test" id="test" disabled="disabled" />
Et puis, au bas de votre page Web, mettez du JavaScript:
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
Essayez le code jQuery suivant qui a fonctionné pour moi.
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
Au lieu de "voici ce qui a fonctionné pour moi", des réponses et d’autres réponses qui ressemblent à des hacks complets ... C’est actuellement comment chrome (et la dernière spécification) gérera les attributs autocomplete de votre input éléments:
https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=fr
TLDR: Ajoutez autocomplete='<value>' sur vos entrées, où <value> devrait être toute chaîne définissant le domaine. Cela fonctionne de manière similaire à l'attribut name. Utilisez les valeurs suggérées sur le lien ci-dessus dans la mesure du possible.
En outre, supprimez l'attribut autocomplete de votre formulaire
La seule façon qui fonctionne pour moi était: (jQuery required)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
J'ai rencontré le même problème. Et voici la solution pour désactiver le nom d'utilisateur et le mot de passe à remplissage automatique sur Chrome (uniquement testé avec Chrome uniquement)
<!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
<input type="tel" hidden />
<input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
essayez avec un espace dans la valeur:
<input type="email" name="email" value=" ">
<input type="password" name="password" value=" ">
chrome 54.0.2840.59
La solution la plus récente consistant à ajouter autocomplete="new-password" au champ de mot de passe est très utile pour empêcher Chrome de le remplir automatiquement.
Toutefois, comme l'a souligné sibbl, cela n'empêche pas Chrome de vous demander de sauvegarder le mot de passe une fois la soumission du formulaire terminée. Depuis Chrome 51.0.2704.106, j'ai constaté que vous pouviez y parvenir en ajoutant un champ de mot de passe factice invisible comportant également l'attribut autocomplete="new-password". Notez que "display: none" ne fonctionne pas dans ce cas. par exemple. Ajoutez quelque chose comme ceci avant le champ mot de passe réel:
<input type="password" autocomplete="new-password"
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`
Cela ne fonctionnait que pour moi lorsque je définissais la largeur sur une valeur non nulle. Merci à tibalt et au namrouti pour les réponses originales.
Ma solution de contournement étant donné qu'aucune de ces solutions ne semble fonctionner dans Chrome 63 et au-delà
J'ai résolu le problème sur mon site en remplaçant l'élément d'entrée incriminé par
<p class="input" contenteditable="true"> </p>
et utiliser jQuery pour renseigner un champ caché avant la soumission.
Mais c’est un bidule vraiment horrible rendu nécessaire par une mauvaise décision de Chromium.
J'ai finalement réussi à utiliser un textarea. Pour un champ de mot de passe, un gestionnaire d'événements remplace chaque caractère saisi par un "•".
J'avais besoin de champs supplémentaires pour que cela fonctionne correctement, car chrome remplit en fait de nombreux champs. Et j'avais également besoin de cacher les champs d'une manière plus sophistiquée que l'affichage: aucun pour que cela fonctionne réellement.
<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1" type="email" name="email_autofill"/>
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1" type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1" type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1" type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish" tabindex="-1" type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish" tabindex="-1" type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish" tabindex="-1" type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish" tabindex="-1" type="password" name="passwordRepeated_autofill"/>
Comme Dvd Franco l'a dit, pour moi, mettre autocomplete = 'off' uniquement dans tous les domaines a fonctionné. Donc, je mets ces règles jquery dans $ (document) .ready (); fonctionner sur mon fichier principal .js
$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');
Ma solution dépend de trois choses:
- événement keydown
- masquer le nom du champ
- masquer les valeurs des champs lors de l'envoi
Tout d'abord, nous devons empêcher la saisie semi-automatique du nom d'utilisateur et du mot de passe. Par conséquent, nous allons initialement définir deux indicateurs, i -> nom d'utilisateur et j -> mot de passe avec la valeur true. vrai.
Dans le cas où le masquage de champ se produirait côté serveur, en passant une chaîne aléatoire, il serait facile de le créer en utilisant également le côté client.
C'est le code:
$(document).ready(function(){
i= true; //username flag
j= true; // password flag
$("#username{{$Rand}}").keydown(function(e){
// {{$Rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
i = false;
});
$("#passowrd{{$Rand}}").keydown(function(e){
// {{$Rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
j = false;
});
// Now we will use change event,
$("#username{{$Rand}}").change(function(){
if($(this).val() != ''){ //the field has value
if(i){ // there is no keyboard buttons clicked over it
$(this).val(''); // blank the field value
}
}
})
$("#password{{$Rand}}").change(function(){
if($(this).val() != ''){ // the same as username but using flag j
if(j){
$(this).val('');
}
}
})
$("#sForm").submit(function(e){ // the id of my form
$("#password-s").val($("#password{{$Rand}}").val());
$("#username-s").val($("#username{{$Rand}}").val());
// Here the server will deal with fields names `password` and `username` of the hidden fields
$("#username{{$Rand}}").val('');
$("#password{{$Rand}}").val('');
})
})
Voici le HTML:
<form class="form-horizontal" autocomplete="off" role="form" id="sForm" method="POST" action="https://example.com/login">
<input type="hidden" name="password" id="password-s">
<input type="hidden" name="username" id="username-s">
<label for="usernameTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Username</label>
<input id="usernameTDU3m4d3I5" placeholder="Username" autocomplete="off" style="border-bottom-left-radius: 10px; border-top-right-radius: 10px; font-family: fixed; font-size: x-large;" type="text" class="form-control" name="usernameTDU3m4d3I5" value="" required="required" autofocus="">
<label for="passwordTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Password</label>
<input id="passwordTDU3m4d3I5" placeholder="Password" autocomplete="off" type="password" class="form-control" name="pa-TDU3m4d3I5" required="">
<button type="submit" class="btn btn-success">
<i class="fox-login" style="text-shadow: 0px 1px 0px #000"></i><strong>Login</strong>
</button>
</form>
La solution ci-dessus, en effet, n'éliminera ni n'empêchera la saisie semi-automatique du nom d'utilisateur et du mot de passe, mais rendra la saisie semi-automatique inutile. c.-à-d. sans appuyer sur le bouton du clavier sur le champ, la valeur du champ sera vide avant la soumission, de sorte que l'utilisateur sera invité à les saisir.
Mise à jour
Nous pouvons également utiliser l'événement click pour empêcher la saisie semi-automatique de la liste des utilisateurs apparue sous le champ, comme suit:
$("#username{{$Rand}}").click(function(){
$(this).val('');
i = true;
})
$("#password{{$Rand}}").click(function(){
$(this).val('');
j = true;
})
Limites:
Cette solution ne peut pas fonctionne comme prévu dans les appareils à écran tactile.
Mise à jour finale
J'ai effectué l'implémentation propre suivante comme suit:
preventAutoComplete = true; // modifier to allow or disallow autocomplete
trackInputs = {password:"0", username:"0"}; //Password and username fields ids as object's property, and "0" as its their values
// Prevent autocomplete
if(preventAutoComplete){
$("input").change(function(e){ // Change event is fired as autocomplete occurred at the input field
trackId = $(this).attr('id'); //get the input field id to access the trackInputs object
if (trackInputs[trackId] == '0' || trackInputs[trackId] != $(this).val()){ //trackInputs property value not changed or the prperty value ever it it is not equals the input field value
$(this).val(''); // empty the field
}
});
$("input").keyup(function(e){
trackId = $(this).attr('id');
trackInputs[trackId] = $(this).val(); //Update trackInputs property with the value of the field with each keyup.
});
}
Sur le chrome 53.0.2785.92 (64 bits), ce qui suit a fonctionné
<div style="visibility:hidden">
<input type="text" name="fake_username_remembered">
<input type="password" name="fake_password_remembered">
</div>
display:none ne fonctionne pas
Donc, apparemment, les meilleurs correctifs/hacks pour cela ne fonctionnent plus, encore une fois. La version de Chrome que j'utilise est la version 49.0.2623.110 m et les formulaires de création de compte affichent maintenant un nom d'utilisateur et un mot de passe enregistrés qui n'ont rien à voir avec le formulaire. Merci Chrome! D'autres hacks semblaient horribles, mais ce hack est moins horrible ...
C’est la raison pour laquelle ces hacks doivent fonctionner, c’est parce que ces formulaires sont généralement des formulaires de création de compte, c’est-à-dire pas des formulaires de connexion qui devraient être autorisés à saisir un mot de passe. Formulaires de création de compte pour lesquels vous ne voulez pas avoir à vous soucier de la suppression du nom d'utilisateur et des mots de passe. Logiquement, cela signifie que le champ du mot de passe ne sera jamais renseigné lors du rendu. Donc, j'utilise plutôt une zone de texte avec un peu de javascript.
<input type="text" id="password" name="password" />
<script>
setTimeout(function() {
$("#password").prop("type", "password");
}, 100);
// time out required to make sure it is not set as a password field before Google fills it in. You may need to adjust this timeout depending on your page load times.
</script>
Je trouve cela acceptable dans la mesure où un utilisateur ne parvient pas à saisir un mot de passe dans un court laps de temps, et publier sur le serveur ne fait aucune différence si le champ est un champ de mot de passe, car il est de toute façon renvoyé au texte brut.
Mise en garde: si, comme moi, vous utilisez le même formulaire de création qu'un formulaire de mise à jour, les choses pourraient devenir difficiles. J'utilise mvc.asp c # et lorsque j'utilise @ Html.PasswordFor (), le mot de passe n'est pas ajouté à la zone de saisie. C'est une bonne chose. J'ai codé autour de cela. Mais en utilisant @ Html.TextBoxFor (), le mot de passe sera ajouté à la zone de saisie, puis masqué en tant que mot de passe. Cependant, comme mes mots de passe sont hachés, le mot de passe dans la zone de saisie est le mot de passe haché et ne doit jamais être retransmis sur le serveur - la sauvegarde accidentelle d'un mot de passe haché constituerait une tâche pénible pour quelqu'un qui tente de se connecter. N'oubliez pas de définir le mot de passe sur une chaîne vide avant le rendu de la zone de saisie si vous utilisez cette méthode.
Si display: none ne fonctionne pas, cela est également possible et semble fonctionner (Chrome v60.0.3112.113):
.hidden-fields {
opacity: 0;
float: left;
height: 0px;
width: 0px;
}
<input type="text" name="username" class="hidden-fields">
<input type="password" name="password" class="hidden-fields">
<your actual login fields></your actual login fields>
Enfin, je pense que je suis venu avec une solution décente. Comprendre mieux le fonctionnement du menu déroulant avec Chrome aidé :) En gros, le menu déroulant s'affiche lorsque vous concentrez l'entrée et que vous générez un événement de souris lorsque vous tapez une entrée qui correspond à quoi Chrome a en mémoire. Gardez cela à l'esprit, et que Chrome le fait pour certaines entrées lorsqu'elles ont des noms par défaut tels que "nom", "email", etc. Nous avons juste besoin de supprimer le nom lorsque la liste déroulante va être affiché et rajouté après :) Je voulais utiliser une solution qui puisse le faire fonctionner simplement en ajoutant l’attribut autocomplete off. Je pensais que cela avait du sens. C'est le code:
Solution 1
jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
jQuery(this).attr('name',this.currentName);
});
Solution 2 (Mon préféré)
La solution que j'ai décrite ci-dessus supprimera le nom de l'entrée jusqu'à ce que le focus (flou) soit supprimé. À ce moment-là, le nom d'origine sera renvoyé. Mais il peut arriver que nous ayons intérêt à avoir accès à l’entrée via son attribut name pendant la frappe. Ce qui signifie que nous devons remettre le nom juste après chaque entrée. Cette solution repose essentiellement sur la première solution. Dans ce cas, nous ajouterons le nom sur key down et le remettrons sur keyup. Je pense que ceci est plus intéressant pour la compatibilité avec ce que devrait être le comportement "autocomplete off". En tout cas c'est le code:
jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName !="undefined")
jQuery(this).attr('name',this.currentName);
});
Veuillez noter que pour les solutions 1 et 2, je viens de prendre les cas où le nom saisi est "nom" et "email". Pour tout autre cas où cet attribut permet à Chrome de générer le menu déroulant, vous devrez l'ajouter dans le sélecteur pour l'événement de souris enfoncé.
Solution
Cette solution est beaucoup plus salissante. Je ne savais pas que le comportement que nous essayons de corriger est simplement basé sur ces entrées avec un nom spécifique tel que "nom, email, etc.". L’approche de cette solution consistait pour ce cas à Chrome afficher d’autres noms inconnus a priori. Ce serait une solution très générique. Je n'aime pas autant que les 2 autres, essentiellement parce qu'il pourrait y avoir un petit scintillement lorsque nous appuierons sur la touche Suppr. Je vais expliquer ce ci-dessous.
J'ai découvert que la liste déroulante apparaissait après un deuxième clic sur l'entrée mais pas sur le premier clic lorsque vous vous concentrez sur la première fois. Je lie un événement "mousedown" pour tous ces éléments où le gestionnaire détecte si il est déjà concentré sur l'entrée et s'il détecte une autre "souris vers le bas", force un. Blur () puis .focus () après, empêchant la liste déroulante au deuxième clic une fois la mise au point effectuée. J'espère que c'est clair, juste au cas où voici le code que j'ai utilisé:
jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(jQuery(this).is(':focus')) {
jQuery(this).blur();
jQuery(this).focus();
}
});
D'autre part, afin d'éviter la liste déroulante lors de la frappe, au cas où cela correspondrait avec les suggestions Chrome ... C'est un peu délicat. J'ai juste décidé de remplacer le comportement par défaut d'une entrée pendant que l'utilisateur tape. La liste déroulante évalue l'entrée lorsque la souris est enfoncée. Par conséquent, j'empêche le comportement par défaut des caractères alphanumériques, de l'espace, etc. Le seul problème concerne Command, Ctrl et delete. Pour ce cas, je devais également lier un événement avec souris. Cela permet le comportement par défaut dans les deux premiers cas pour que vous puissiez copier, coller et tout sélectionner. Dans le cas de la suppression, je dois autoriser le comportement par défaut, mais si après la suppression d'un caractère, l'entrée correspond aux suggestions Chrome, elle affiche à nouveau le menu déroulant. Pour ce cas, je devais utiliser le même truc de flou et de mise au point. Le seul inconvénient que j’ai trouvé à ce sujet est que, puisque nous annulons le comportement lors de l’utilisation de la touche keyup et que chrome tente de l’afficher lors de la réduction des touches, il se produit un petit scintillement. Quoi qu'il en soit, c'est le mieux que je puisse faire. Cela nécessitera probablement le filtrage des caractères à un moment donné. Je viens d'ajouter que les conditions avaient plus de sens pour le moment. C'est la deuxième partie du code:
jQuery('body').on('keydown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){
e.preventDefault();
var charStr = String.fromCharCode(charCode);
if(!e.shiftKey)
charStr = charStr.toLowerCase(charStr);
$(this).val($(this).val() + charStr);
}else{
if (charCode == cmKey) this.commandDown = true;
if (charCode == ctrlKey) this.ctrlDown = true;
}
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var allowed=[8];//Delete
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if (charCode == cmKey) {this.commandDown = false};
if (charCode == ctrlKey) {this.ctrlDown = false};
if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
jQuery(this).blur();
jQuery(this).focus();
}
Comme je l'ai dit cette solution est beaucoup plus salissante. C'était le premier que j'ai utilisé jusqu'à ce que je réalise que la liste déroulante vient d'apparaître pour certains noms d'entrée.
Désolé d'avoir tant écrit, je voulais juste m'assurer que tout était clair. J'espère que ça aide.
Boom, Google Chrome et tout le monde essaie de le vaincre à ce moment-là.
J'ai pu l'implémenter aujourd'hui, le 7 septembre 2017, mais en utilisant un FormCollection de chaînes aléatoires générées dans ma vue MVC.
Je voudrais d'abord obtenir une nouvelle clé aléatoire dans le contrôleur d'index de ma page de connexion, chiffrer et créer une nouvelle chaîne aléatoire totalement unique (en fait, j'ai utilisé un chiffrement de 256 bits pour effectuer cette opération, ainsi qu'un chiffrement unique et une clé d'authentification), puis j'ai ajouté le texte en clair 'Nom d'utilisateur' et 'Mot de passe' à la fin de chaque chaîne pour m'aider ultérieurement à identifier le nom d'utilisateur et le mot de passe à partir du contrôleur de vue représentant. Vous pouvez également changer cette chaîne en quelque chose si vous connaissez le motif et qu'il est unique.
De mon point de vue, j'ai ensuite utilisé ces variables de manière appropriée, puis dans le contrôleur qui a répondu (recherché dans un FormCollection et trouvé les variables correspondantes), puis utilisé la valeur-clé de cet élément en tant que nom d'utilisateur et mot de passe correspondants, à traiter correctement.
L’autre problème que j’ai eu et qui, je pense, est sournois de Chrome, est-ce que
Des pensées ?
<style>
@@font-face {
font-family: 'password';
font-style: normal;
font-weight: 400;
src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}
</style>
<input type="text" name="@Model.UsernameRandomNameString" />
<input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" />
LogOnModel model = new LogOnModel()
{
UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username",
PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password",
};
Je pense que c'est une solution de rechange géniale, mais bon, cela fonctionne et je pense que cela pourrait aussi être la preuve du futur, à moins que Google ne détermine que l'URL de la page contient des mots clés, puis ajoute de manière appropriée ses stupides extensions en haut de tout champ de saisie. - mais c'est un peu drastique.
Pour Angular utilisateurs:
Étant donné que autocomplete = 'off' ignore par les nouvelles versions chrome, le développeur chrome suggère autocomplete = 'false | random-string ', donc les navigateurs google chrome/modernes ont 2 types d’aides utilisateurs -
autocomplete='off'(qui empêche les dernières suggestions mises en cache).autocomplete = 'false | random-string'(qui empêche le réglage du remplissage automatique, car la 'chaîne aléatoire' n'est pas connue du navigateur).
alors que faire, en cas de désactivation des suggestions ennuyeuses? Voici le truc: -
- ajoutez
autocomplete = 'off'dans chaque champ de saisie. (ou simple Jquery).
Exemple: $("input").attr('autocomplete', 'off');
- Supprimez la balise
<form name='form-name'>du code HTML et ajoutezng-form = 'form-name'dans votre conteneur<div>. Ajouterng-form="form-name"conservera également toutes vos validations.
J'ai essayé tous les conseils mentionnés mais aucun d'entre eux n'a fonctionné. J'utilise l'auto-complétion Google Places sur l'entrée specifik, et il est assez moche s'il existe un remplissage automatique Google chrome au-dessus de la liste d'auto-complétion Google Places. Même définir autocomplete = "n'importe quoi" est inutile car le plugin autocomplete lui-même définit cet attribut sur "off" et il est totalement ignoré par chrome.
donc ma sollicitation est:
var fixAutocomplete = window.setInterval(function(){
if ($('#myinput').attr('autocomplete') === 'false') {
window.clearInterval(fixAutocomplete);
}
$('#myinput').attr('autocomplete', 'false');
}, 500);
solution HTML pure:
(Pas de javascript, pas de css et pas d'entrées cachées)
<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
Remarques:
- le formulaire n'a pas nécessairement besoin d'être le parent direct de l'élément d'entrée
- l'entrée a besoin d'un attribut name
Je rencontrais ce problème avec une fenêtre modale "Connectez-vous ou enregistrez-vous maintenant" et je rencontrais un problème si l'utilisateur avait sauvegardé ses informations d'identification dans le navigateur. Les champs de connexion et de registre ont été renseignés. J'ai donc pu les effacer avec la directive angular js suivante:
(function () {
"use strict";
var directive = function ($timeout) {
return {
restrict: "A",
link: function (scope, element, attrs) {
$timeout(function () {
element.val(" ");
$timeout(function () {
element.val("");
});
});
}
};
};
angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);
}());C'est fondamentalement la même chose que certaines des réponses précédentes qui utiliseraient jQuery, mais faites de manière angular.
Si vous utilisez des formulaires Symfony, autocomplete=off ne fonctionnera pas SI l'attribut est appliqué à partir du modèle twig au lieu d'utiliser FormBuilder.
Utilisez ceci:
....
->add('field-name', TextType::class, array(
'attr' => array(
'autocomplete' => 'off'
)
)
....
Plutôt que:
....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....
Qu'est-ce que je l'ai fait pour changer le type d'entrée = "texte" à une entrée multi-ligne à-dire.
overflow-x:hidden;
overflow-y:hidden;
vertical-align:middle;
resize: none;
Une explication rapide du code: Les options overflow-x et -y cachées désactivent les boutons de défilement situés à droite de la zone de texte. L'algin vertical aligne le milieu vertical du libellé avec la zone de texte et le redimensionnement: aucun ne désactive la capture de redimensionnement en bas à droite de la zone de texte.
En substance, cela signifie que votre zone de texte apparaîtra comme une zone de texte, mais avec chrome remplissage automatique désactivé.
Je sais que ce n'est pas tout à fait pertinent, mais voici ce que j'ai fait. Les champs remplis automatiquement déclenchent un événement 'changement', mais uniquement si vous le liez le plus tôt possible.
donc je mets cela à l'intérieur de la section de tête.
$(document).ready(function(){
$('input').on('change',function(){$(this).val('')})
});
et cela a fonctionné pour moi.
Mon hack - testé dans Chrome 48:
Puisque Chrome essaie de déterminer le type de champ en examinant des éléments tels que id ou name attributs du <input>, mais également associé <label> _ contenu, il vous suffit de trouver des noms sans signification pour ceux-ci.
Pour les id et name, il est facile de choisir quelque chose d'autre qui ne figure pas dans la liste ici .
Pour le label, j’ai inséré un <span> invisible au milieu, par exemple. pour une ville (ça déconne avec mes Places autocomplete) :
<span>Ci<span style="display:none">*</span>ty</span>
Exemple de travail complet:
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/register">
<div>
<label for="name">Name</label>
<input id="name" type="text" name="name" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" name="email" />
</div>
<div>
<label for="id1">City</label>
<input id="id1" type="text" name="id1" /> <-- STILL ON :(
</div>
<div>
<label for="id2">Ci<span style="display:none">*</span>ty</label>
<input id="id2" type="text" name="id2" /> <-- NOW OFF :)
</div>
</form>
</body>
</html>La réponse de Jobin José m'a donné un début. Voici ce qui fonctionne pour moi:
<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>
Assurez-vous de ne pas avoir autocomplete = "off", ce qui gâcherait la solution.
Mon problème était que Chrome remplissait automatiquement le code postal, via l'interface Bootstrap, tandis que je suggérais automatiquement les valeurs possibles de ma base de données.
Choses que je devais faire:
- Remplacez la propriété
iddu champ de saisie par autre chose que "code postal" - Remplacez la valeur
autocompletedu champ de saisie parfalse - Après avoir appelé
$('#postcode_field').autocomplete(...), je devais réinitialiser la propriété autocomplete avec$('#postcode_field').prop('autocomplete', 'false');, car le plug-in Boomplrap autocomplete le change automatiquement enoff.
Puisque l'affichage ne semble plus fonctionner, ajoutez le
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
à l'intérieur d'une div avec débordement masqué, largeur maximale et hauteur maximale 0px
Cela devient donc quelque chose comme:
<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
</div>
Entrez une valeur '' (un espace vide) pour le champ Nom d'utilisateur.
<input type = 'text' value = ' ' name = 'username' />
Si vous remplissez le nom d'utilisateur avec une valeur entrée par l'utilisateur, saisissez un '' s'il n'y a pas de valeur entrée par l'utilisateur.
Éditer: je devais aussi changer les champs "nom d'utilisateur" pour avoir un nom autre que "nom d'utilisateur", par exemple. 'nom d'utilisateur'
Il faut aussi que la valeur soit vide (valeur = "") en plus de autocomplete = "off" pour que cela fonctionne.
La méthode pour le cacher en ajoutant "display: none;" l’entrée n’a pas fonctionné pour moi si le formulaire est généré via javascript.
Alors au lieu de cela, je les ai rendus invisibles en les plaçant hors de la vue:
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>
Malheureusement, aucune des solutions ne semble fonctionner. J'ai pu effacer le courrier électronique (nom d'utilisateur) en utilisant
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
technique, mais le mot de passe est toujours renseigné.
20 janvier chrome mise à jour
Aucune des solutions ci-dessus, y compris l'ajout de faux champs ou la définition de autocomplete = new-password ne fonctionne. Oui, avec ces chrome ne sera pas autocomplété, mais lorsque vous entrez le champ mot de passe, il suggérera à nouveau le mot de passe.
J'ai constaté que si vous supprimez le champ du mot de passe puis le rajoutez sans identifiant alors chrome ne le remplit pas automatiquement et ne suggère pas le mot de passe lors de la saisie.
Utilisez une classe pour obtenir la valeur du mot de passe au lieu d'un identifiant.
Pour Firefox, il est toujours nécessaire d’ajouter un élément factice.
Cette solution permet également d’autoriser/interdire la complétion automatique basée sur un drapeau:
html:
<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
<span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
<span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>
chargement de la page:
function hideAutoComplete(formId) {
let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
passwordElem.remove();
prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}
if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();
quand vous avez besoin du mot de passe:
$('.loginPasswordInput').val();
Aucune des autres solutions à ces questions n'a fonctionné pour moi.
La seule pensée qui a fonctionné est celui-ci :
Il supprime les attributs "name" et "id" des éléments et les assigne après 1ms. Mettez ceci dans le document préparez-vous.
$(document).ready(function() {
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
});
Aucune des solutions n'a fonctionné pour moi. Enfin, après avoir tiré mes cheveux pendant plusieurs heures, j'ai proposé cette solution pour ReactJS.
Testé sur FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13
Je garde le type="text" et le change en type pertinent sur l'événement onChange.
ex: HTML:
<input type="text" onChange={this.setAttributes} placeholder="Email" />
JS:
setAttr2: function(e){
var value = e.target.value;
if(value.length){
e.target.setAttribute('type', 'email')
} else {
e.target.setAttribute('type', 'text')
}
}
La fonctionnalité de saisie semi-automatique a été désactivée avec succès via cette astuce. ça marche!
[HTML]
<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>
[JQuery]
$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
let elem = $(this);
if (elem.val().length > 0 && elem.attr("type") === "text") {
elem.attr("type", "password");
} else {
setTimeout(function () {
if (elem.val().length === 0) {
elem.attr("type", "text");
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
}, 1);
}
if (elem.val() === "" && e.type === "mousedown") {
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
});