仅使用Javascript显示/隐藏onClick按钮的密码 [英] Show/hide password onClick of button using Javascript only

问题描述

我想使用Javascript单击眼睛图标时创建密码切换功能。我已经为它编写了代码，但它仅用于显示密码文本，而不是相反的方式。有人可以在下面的代码中看到逻辑错误。

HTML代码：

 < input type =passwordplaceholder =Passwordid =pwdclass =maskedname =password/> 
< button type =buttononclick =showHide（）id =eye> 
< img src =eye.pngalt =eye/> 
< / button> 
  

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; 
 $ b $ document.getElementById（eye）。addEventListener（click，function（）{
 if（pwShown == 0）
 {
 pwShown = 1 ; 
 show（）; 
} 
 else {
 pwShow = 0; 
 hide（）; 
} 
}，false）; 
 
 
 
 
解决方案
你是每次单击按钮时都会绑定点击事件。你不需要多个事件处理程序。此外，您每次点击都重新定义 var pwShown = 0 ，所以您永远无法恢复输入状态（ pwShown 保持不变） 。
 
 
 
删除onclick属性并将点击事件绑定到 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; （）;} else {pwShown = 0; hide（）;}}，false）;  

      眼睛 > < img src =https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.pngalt =eye/>< / button>  

I want to create password toggle function when clicked on the eye icon using Javascript only. I have written code for it but it works only to show the password text and not the other way round. Can someone see the logic error in the code below.

HTML code:

<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>

Javascript code:

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);

}

解决方案

You are binding click event every time you click a button. You don't want multiple event handlers. Plus you are redefining var pwShown = 0 on every click so you can never revert input state (pwShown stays the same).

Remove onclick attribute and bind click event with 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>

这篇关于仅使用Javascript显示/隐藏onClick按钮的密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！