autocomplete = 'off' ne fonctionne pas lorsque le type d'entrée est un mot de passe et que le champ de saisie situé au-dessus de celui-ci permet d'activer la saisie automatique
J'ai un formulaire avec la saisie semi-automatique désactivée, mais cela ne fonctionne pas et rend l'activation de la saisie semi-automatique activée dans Firefox et la version supérieure de Chrome
<form method="post" autocomplete="off" action="">
<ul class="field-set">
<li>
<label>Username:</label>
<input type="text" name="acct" id="username" maxlength="100" size="20">
</li>
<li>
<label>Password:</label>
<input type="password" name="pswd" id="password" maxlength="16" size="20" >
</li>
<li>
<input type="submit" class="button" value="Login" id="Login" name="Login">
</li>
</ul>
</form>
Lorsque le type de mot de passe est changé en texte, cela fonctionne dans tous les navigateurs. Quelqu'un peut-il aider à résoudre ce problème?
Les navigateurs ont normalement deux caractéristiques liées, mais différentes, concernant les formulaires:
Formulaire de saisie semi-automatique, où les éléments de type
<input type="text">(et similaires) collectent les valeurs typées et les proposent sous forme de liste déroulante.
(C'est une fonctionnalité simple qui fonctionne plutôt bien.)Gestionnaire de mots de passe, où le navigateur vous invite à mémoriser les combinaisons nom d'utilisateur/mot de passe lorsqu'il détecte que vous avez soumis un formulaire de connexion. Lors du retour sur le site, la plupart des navigateurs affichent les noms d'utilisateurs disponibles dans une liste déroulante (Firefox, Chrome, Internet Explorer ...), mais certains possèdent un bouton dans la barre d'outils (Opera). En outre, Chrome met en évidence les champs en jaune codé en dur .
(Cela dépend de l'heuristique et peut échouer sur certaines pages.)
Il existe un cas Edge avec des formulaires étiquetés comme autocomplete="off". Que se passe-t-il s'il s'agit d'un formulaire de connexion et que l'utilisateur a déjà enregistré un nom d'utilisateur/mot de passe? En fait, supprimer le mot de passe de la base de données locale semble inapproprié, aucun navigateur ne le fait probablement. (En fait, les données de l'auto-complétion de formulaire ne sont pas non plus effacées.) Firefox décide de donner du pouvoir à l'utilisateur: vous avez un mot de passe, je vous laisse donc l'utiliser. Chrome décide de donner du pouvoir au site.
Vous pouvez simplement rendre le champ en lecture seule pendant le chargement du formulaire. Pendant que le champ devient actif, vous pouvez le modifier pour qu'il soit modifiable. C'est le moyen le plus simple d'éviter l'auto-complétion.
<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
Lorsque j'ai rencontré le même problème, j'ai résolu le problème en créant une zone de texte temporaire au-dessus du champ du mot de passe et en le masquant.
comme ça,
<form method="post" autocomplete="off" action="">
<ul class="field-set">
<li>
<label>Username:</label>
<input type="text" name="acct" id="username" maxlength="100" size="20">
</li>
<li>
<label>Password:</label>
<input type="text" style="display:none;">
<input type="password" name="pswd" id="password" maxlength="16" size="20" >
</li>
...
</ul> </form>
Le champ de texte username ne montrera aucun mot précédemment saisi dans un menu déroulant. Puisqu'il n'y a pas d'attribut comme name, id pour le champ de saisie <input type="text" style="display:none;">, il n'enverrait pas non plus de paramètres supplémentaires.
Je ne suis pas sûr que ce soit une bonne pratique, mais cela résoudra le problème.
Ceci empêchera le remplissage automatique du mot de passe dans le champ de saisie (type = "mot de passe").
<form autocomplete="off">
<input type="password" autocomplete="new-password">
</form>
Ajoutez simplement l'attribut autocomplete="new-password" à votre champ de saisie du mot de passe.
Pour en savoir plus sur autocomplete: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password
Ma solution inspirée ici va comme suit:
<form>
<input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
<input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
Username: <input type="text">
Password: <input type="password">
<input type="submit">
</form>
C'est vraiment moche, on se sent mal à l'aise en 2017, mais cela fonctionne et protège le champ du nom d'utilisateur et du mot de passe du remplissage automatique. Notez que dans Firefox (version 51 au moment de la rédaction), la combinaison de name, id ou autocomplete importe peu, que ce soit dans les champs de formulaire ou de saisie. Sans les deux premiers champs factices, le remplissage automatique aura lieu à chaque fois que le domaine est mis en correspondance, ce qui gâchera votre journée.
J'ai essayé toutes sortes de solutions de contournement, mais cette combinaison fonctionnait sur tous les navigateurs dans mon cas:
<input type="password" id="Password" name="Password"
autocomplete="new-password"
onblur="this.setAttribute('readonly', 'readonly');"
onfocus="this.removeAttribute('readonly');" readonly>
Et c'est une solution assez propre aussi :)
Ce qui a fonctionné pour moi, c'est utiliser autocomplete = "new-password" uniquement dans input type = "password", comme ceci:
<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">
Indépendamment du nombre d'entrées du formulaire.
Voici un hack qui semble fonctionner dans Firefox et Chrome.
Dans Firefox, avoir un champ de texte désactivé juste avant le mot de passe semble faire l'affaire, même s'il est caché (désactivé: aucun)
Dans Chrome, il doit être visible cependant.
Je suggère donc quelque chose comme ceci:
HTML:
<input class="password-autocomplete-disabler" type="text" disabled>
<input type="password" name="pwd">
CSS:
input[type=text].password-autocomplete-disabler {
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
}
Pour mot de passe, cela ne fonctionne pas actuellement.
Donc, par défaut, créez le mot de passe sous forme de texte et utilisez le code js suivant.
$('#real-password').on('input', function(){
if ($(this).val() !== '') {
$(this).attr('type', 'password');
} else {
$(this).attr('type', 'text');
}
});Je sais que c'est une vieille question, mais les navigateurs ont changé avec le temps. Bien que certaines des réponses à cette question mentionnée ici ressemblent à: créer une zone de texte temporaire au-dessus du champ de mot de passe et le masquer a peut-être déjà fonctionné, le moyen le plus simple d’empêcher le navigateur d’afficher le gestionnaire de mot de passe est d'avoir au moins trois entrées de mot de passe cachées supplémentaires distinctes, chacune avec des valeurs nominales différentes, comme ceci:
<form method="post" autocomplete="off" action="">
<ul class="field-set">
<li>
<label>Username:</label>
<input type="text" name="acct" id="username" maxlength="100" size="20">
</li>
<li>
<label>Password:</label>
<input type="password" name="pswd" id="password" maxlength="16" size="20" >
<input type="password" style="display: none;" value="dummyinput1"/>
<input type="password" style="display: none;" value="dummyinput2"/>
<input type="password" style="display: none;" value="dummyinput3"/>
</li>
<li>
<input type="submit" class="button" value="Login" id="Login" name="Login">
</li>
</ul>
</form>
Just Found Une autre solution simple et a travaillé pour moi sur les 3 principaux navigateurs Chrome, Firefox et Opera.
<input type="text" onfocus="this.type='email'"/>
<input type="text" onfocus="this.type='password'"/>
Mon sol:
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">
function turnOnPasswordStyle(){
$('#inputpassword').attr('type', "password");
}
Ajouter autocomplete="off" ne suffira pas, il est ignoré par Chrome.
Changez l'attribut du type d'entrée en type="search".
Google n'applique pas le remplissage automatique aux entrées avec un type de recherche.
Pour le type de texte, utilisez autocomplete="off" ou autocomplete="false"
<input id="username" type="text" autocomplete="false">
Pour le type de mot de passe, utilisez autocomplete="new-password"
<input id="password" type="password" autocomplete="new-password">
J'ai constaté que si l'entrée ne comporte pas de nom (l'attribut name n'est pas défini, par exemple), le navigateur ne peut pas compléter automatiquement le champ. Je sais que ce n'est pas une solution pour tout le monde, mais si vous soumettez votre formulaire via AJAX, vous pouvez essayer ceci.
J'ai récemment été confronté à ce problème, et sans solution simple puisque mes champs peuvent être pré-remplis, je souhaitais partager un hack élégant que j'ai créé en définissant le type de mot de passe dans l'événement ready.
Ne déclarez pas votre champ de saisie comme type de mot de passe lors de sa création, mais ajoutez un écouteur d'événement prêt à l'ajouter pour vous avec jQuery:
<input type="text" name="pswd" id="password" maxlength="16" size="20" >
<script>
$(function(){
document.getElementById('password').setAttribute('type', 'password');
});
</script>
Essayez de définir autocomplete = "new-password" comme indiqué ci-dessous:
<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password" />
autocomplete=off est en grande partie ignoré par les navigateurs modernes - principalement à cause des gestionnaires de mots de passe, etc.
Vous pouvez essayer d’ajouter ce autocomplete="new-password" qui n’est pas totalement supporté par tous les navigateurs, mais il fonctionne sur certains
<form method="post" autocomplete="off" action="">
<ul class="field-set">
<li>
<label>Username:</label>
<input type="text" name="acct" id="username" maxlength="100" size="20">
</li>
<li>
<label>Password:</label>
<input type="text" style="display:none;">
<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
</li>
...
</ul> </form>Je pense que ce problème est spécifique au navigateur (chrome). Vous pouvez donc le gérer en ajoutant une condition pour le chrome uniquement.
@Html.PasswordFor(model => model.Password, new { @autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off") })
@autocomplete = (Request.Browser.Browser.ToLower (). Contient ("chrome") ? "new-password": "off")
Pourquoi tout le monde ne l'utilise pas ....
<form>
<div class="user">
<i> </i>
<input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">
</div>
<div class="user1">
<i> </i>
<input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
</div>
<div class="user2">
<input type="submit" value="Login">
</div>
</form>
C'est si simple ... :)
<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">
Voici.
Une approche différente consiste à nettoyer la valeur du champ de mot de passe lors du chargement de la page au lieu d'essayer de l'empêcher de se remplir automatiquement.
Avec jQuery, ajoutez simplement quelque chose comme:
$(function() { $('#password_field').val(''); });