J'ai un formulaire de connexion habituel composé de deux champs de saisie, un pour la connexion, une pour mot de passe. J'essaie actuellement d'ajouter un contrôle qui affichera le mot de passe entré en tant que texte brut, afin que l'utilisateur puisse le vérifier pour des typoss.
Le problème est que les navigateurs (au moins Firefox) n'autorisent pas le changement dynamique de type attribut d'attributs de saisie, donc je ne peux donc pas simplement changer Donc, toutes les suggestions pour faire cela sont les bienvenues. J'utilise JQuery. type = "mot de passe" à type = "texte" . Un autre problème est que les navigateurs ne permettent pas d'obtenir la valeur du champ de mot de passe. Je ne peux donc pas créer de nouveau entrée = "texte" et définir sa valeur sur le mot de passe. J'ai vu plusieurs approches différentes de cette tâche, y compris Celui-ci , mais ils ne fonctionnent que si le mot de passe est saisi et échoue lorsque le navigateur automatique automatique est le mot de passe.
7 Réponses :
Si je peux, je ne pense pas que ce soit une bonne idée de montrer le mot de passe dans le texte, pour les raisons suivantes:
Je pense aussi que si vous voulez simplement aider les utilisateurs à éviter les fautes de frappe, donnez-leur plus de chances avant que le mot de passe soit désactivé. Je pense que le typique "3" que la plupart des sites impliquent n'est pas vraiment nécessaire, je suggérerais "10" tentatives, ou peut-être "5", si vous souhaitez être vraiment conservateur, est tout à fait acceptable. Il suffit de compter pour eux et laissez-les résoudre les fautes de frappe.
juste mon humble avis.
Par défaut, le mot de passe est caché, bien sûr. Si l'utilisateur clique sur le lien marqué "Montrez-moi les lettres de ce que je sais juste dans ce champ de mot de passe parce que je ne suis pas sûr que je les ai dites bien», il y a de fortes chances qu'il comprenne ce qu'il va et il sait ce qu'il va se passer. )
Même des programmes où la sécurité est très importante comme Truecrypt et le mot de passe Safe ont des fonctionnalités permettant de montrer le mot de passe à afficher. Estecilly dans des situations où l'utilisateur pourrait utiliser un mot de passe / une phrase secrète très complexe, pouvant être capable de voir le mot de passe peut être une très bonne fonctionnalité. Je suis d'accord avec N1313 que la personne en cliquant dessus serait probablement de vérifier les surfeurs d'épaule avant de cliquer sur le bouton pour révéler le mot de passe.
Kibbee: Je ne suis pas en désaccord. Chacun à la sienne.
Au lieu de limiter le nombre de réponses, vous pouvez ajouter un sommeil pendant 2-3 secondes avant de répondre que le mot de passe est faux. C'est une attente très tolérable pour un humain, mais cela réduit considérablement l'efficacité des tentatives de force brutale du mot de passe.
Ou mieux encore, utilisez une fonction de hachage sécurisée et lente comme SCRYPT, de sorte que même si votre base de données de mot de passe est piratée il faudrait des milliers d'années pour obtenir des mots de passe de vos utilisateurs même sur des GPU optimisés.
Vous pouvez faire quelque chose comme ceci:
Ça marche! Incroyable. Il semble que mon problème était à JQuery que j'utilise. Par une raison quelconque, cela ne m'a pas permis de faire ce tour.
Plus que probable. J'ai confirmé que cela ne fonctionne pas du tout dans IE.
Je n'ai jamais essayé moi-même mais que vous ne pouvez pas simplement accéder à la propriété de valeur de l'élément?
Si vous avez quelque chose comme ... p> alors En JavaScript / JQuery ... P> var pass = document.getElementById('pw').value;
$('pw').val()
Attends quoi. Je suis à peu près sûr que j'ai essayé cela avant de poster la question et cela n'a pas fonctionné, mais maintenant. Wtf. A besoin de plus de vérification!
@Fraser Votre lien avec W3schools semble être brisé.
@fedorqui Il a plus de 5 ans!
Il n'y a aucune possibilité de montrer un mot de passe modifié pour des raisons de sécurité. Tout le monde pouvait voir votre mot de passe sur votre ordinateur pour cette page si cela est possible.
Vous devez traiter avec une solution complète:
autocomplete désactivé par cette jQuery pour l'ajout de case à la case à la volée Vous pouvez utiliser suivant le plugin JQuery-showpassword disponible sur http://www.CupTech.eu/jquery-plugins/
$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.
function change(){
id.type="password";
}
<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>
Comment cela fournit-il une explication?
Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>