Contrôle "Afficher le mot de passe en tant que texte"

Question

J'ai un formulaire de connexion habituel composé de deux champs de saisie, un pour la connexion, un pour le mot de passe. J'essaye actuellement d'ajouter un contrôle qui montrera le mot de passe entré en texte simple, ainsi l'utilisateur peut le vérifier pour des fautes de frappe.

Le problème est que les navigateurs (au moins Firefox) ne permettent pas de changer de dynamique type attribut des champs d'entrée, donc je ne peux pas simplement changer type="password"-type="text". Un autre problème est que les navigateurs ne permettent pas d'obtenir la valeur du champ de mot de passe, donc je ne peux pas créer un nouveau input type="text" et définir sa valeur à celle du mot de passe. J'ai vu plusieurs approches différentes à cette tâche, y compris this one, mais ils ne fonctionnent que si le mot de passe est tapé et échouent lorsque le navigateur remplit automatiquement le mot de passe. Par conséquent, toutes les suggestions pour ce faire sont les bienvenues. J'utilise jQuery.

Answer 1

Vous pouvez faire quelque chose comme ceci:

<input type="password" id="password"> 
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password 

Answer 2

Si vous permettez, je ne pense pas que c'est une bonne idée de montrer le mot de passe dans le texte, pour les raisons suivantes:

1. Il est généralement pas fait, alors il sera source de confusion pour l'utilisateur
2. Cela signifie que vous êtes ouvert à la visualisation sur l'épaule du mot de passe

Je pense aussi, si vous voulez juste pour aider les utilisateurs à éviter les fautes de frappe, leur donner plus de chances avant que le mot de passe est désactivé. Je pense que le "3" typique que la plupart des sites implémentent n'est pas vraiment nécessaire, je dirais que "10" tentatives, ou peut-être "5", si vous voulez être vraiment conservateur, est tout à fait acceptable. Il suffit de compter pour eux, et laissez-les résoudre les fautes de frappe par leurs propres moyens.

Juste mon humble avis.

Answer 3

Je n'ai jamais essayé moi-même, mais ne peut accéder que vous la propriété de valeur de l'élément?

si vous avez quelque chose comme ...

<input id="pw" name="pw" type="password" /> 

Puis, en JavaScript/JQuery ...

var pass = document.getElementById('pw').value; 

$('pw').val() 

Answer 4

Il n'y a pas toute possibilité d'afficher le mot de passe autofilled pour des raisons de sécurité. Tout le monde peut voir votre mot de passe sur votre ordinateur pour cette page si cela est possible.

Vous avez à traiter à partir pour une solution complète:

• javascript est pas autorisé - alors vous ne devriez pas afficher choisir un mot de passe case
• saisie semi-automatique est activée - comme je l'ai écrit, vous Je ne suis pas en mesure d'afficher le mot de passe rempli de cette façon. Eaighter éteint la saisie semi-automatique ou cache le mot de passe jusqu'à ce que l'utilisateur ressaisisse son mot de passe.

Autocomplete éteindre par ce jQuery

$('input').attr('autocomplete', 'off'); 

Pour ajouter la case à la volée, vous pouvez utiliser suivant le plugin jquery-showPassword disponible à http://www.cuptech.eu/jquery-plugins/

Answer 5

$('.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); 
    } 
}); 

Quelque chose comme ça trouvera l'entrée zone et stocker la valeur dans une variable appelée showValue. Ensuite, vous pouvez remplacer l'élément par type = "password", avec un nouveau html où type = "text" et si la case n'est pas cochée, la valeur sera droppée dans le champ type de mot de passe.

Il y a un problème avec cette méthode en ce que la valeur du type de mot de passe sera visible dans le code, cependant pour contourner cela, vous pouvez toujours supprimer l'attribut value du type mot de passe et forcer l'utilisateur à retaper. Si vous pouvez vivre avec cela dans votre application.

Answer 6

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> 

Answer 7

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>