web-dev-qa-db-fra.com

Afficher/masquer le mot de passe en cliquant sur un bouton en utilisant uniquement Javascript

Je souhaite créer une fonction de basculement de mot de passe lorsque l'utilisateur clique sur l'icône de l'œil à l'aide de Javascript uniquement. J'ai écrit du code pour cela, mais cela ne fonctionne que pour montrer le texte du mot de passe et non l'inverse. Quelqu'un peut voir l'erreur de logique dans le code ci-dessous.

Code HTML:

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" onclick="showHide()" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>

Code Javascript:

function show()
{
var p = document.getElementById('pwd');
p.setAttribute('type','text');  
}

function hide()
{
   var p = document.getElementById('pwd');
p.setAttribute('type','password');   
}

function showHide()
{
    var pwShown = 0;

document.getElementById("eye").addEventListener("click", function() {
    if (pwShown == 0) 
    {
        pwShown = 1; 
        show();
    } 
    else {
        pwShow = 0;
        hide();
    }
            }, false);

}
javascripthtmlformspasswords
12
user0428

Vous liez événement click chaque fois que vous cliquez sur un bouton. Vous ne voulez pas plusieurs gestionnaires d'événements. De plus, vous redéfinissez var pwShown = 0 à chaque clic pour que vous ne puissiez jamais revenir à l'état d'entrée (pwShown reste le même).

Supprimer l'attribut onclick et lier l'événement click avec addEventListener :

function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;
        show();
    } else {
        pwShown = 0;
        hide();
    }
}, false);
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>

21
dfsq

Le moyen le plus simple consiste à utiliser un bouton avec un attribut onclick qui bascule le type de l'entrée.

<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
  else password.type = 'text';">toggle</button>

18
Ameen Ra'is

Vous n'avez pas besoin de conserver une variable supplémentaire "pwShown" pour décider d'afficher du texte ou de le masquer. Tout ce que vous avez à faire est d'examiner l'attribut "type" de l'élément "pwd" comme ci-dessous: 

Exemple de travail

JavaScript: 

document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });

HTML: 

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>
5
Prateek

Suivez ces étapes: Téléchargez les images ci-dessous. Faire un dossier. Ajoutez votre fichier html et les images dans le même dossier. Remplacez la valeur "b.src" en javascript ainsi que dans votre code HTML en conséquence.

Images :  Images  Images 

function show() {
var a=document.getElementById("pwd");
var b=document.getElementById("EYE");
if (a.type=="password")  {
a.type="text";
b.src="https://i.stack.imgur.com/waw4z.png";
}
else {
a.type="password";
b.src="https://i.stack.imgur.com/Oyk1g.png";
}
}
<input type="password" id="pwd">
<button onclick="show()"><img src="https://i.stack.imgur.com/Oyk1g.png" id="EYE"></button>

3
user8158111

Selon ce que vous avez écrit, vous ajoutez l'événement à la fois en html et en javascript (dans la fonction showHide). Peut-être que vous pouvez changer votre code js de ce que vous avez, en:

function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}
0
Mindastic

Solution JQuery de mon code: (il suffit de changer les identifiants).

$(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });
0
Orwol Chiles

C'est une amélioration par rapport à la réponse de Tunaki. Nous ne souhaitons même pas vérifier l'état du champ de formulaire, car il sera entièrement déterminé par l'état de la souris. Cela permet au mot de passe d’être visualisé seulement momentanément (uniquement tant que le bouton de la souris est maintenu enfoncé dessus).

<html>
<head>
    <title>Visible Password Test</title>
</head>

<body>
Password : <input type="password" name="password" id="password" />

<button type="button" id="eye" title="Did you enter your password correctly?" 
    onmousedown="password.type='text';" 
    onmouseup="password.type='password';" 
    onmouseout="password.type='password';">Peek at Password</button>

</body>
</html>
0
Mike Lewis

À chaque fois que vous appelez la fonction showHide () dans votre code, la variable pwShown est définie sur 0.

Vous devez déclarer la variable pwShown en tant que variable globale.

var pwShown = 0;
function showHide()
{
 ...
}
0
Pillow the Awesome