仅使用Javascript显示/隐藏密码onClick按钮

Question

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

HTML代码:

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

Javascript代码:

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

Answer 1

每次单击按钮时,您都会绑定点击事件.您不需要多个事件处理程序.此外,您var pwShown = 0在每次点击时都会重新定义,因此您永远无法恢复输入状态(pwShown保持不变).

删除onclick属性并使用addEventListener绑定click事件:

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>

Answer 2

最简单的方法是使用一个具有onclick切换输入类型属性的按钮.

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

Answer 3

请按照以下步骤操作： 下载下面给出的图像。制作文件夹。将您的 html 文件和图像添加到同一文件夹中。相应地替换 javascript 和 html 代码中“b.src”的值。

图片 ：

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>

Answer 4

您不需要维护一个额外的"pwShown"变量来决定是显示文本还是隐藏它.您需要做的就是检查"pwd"元素的"type"属性,如下所示:

工作实例

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>

Answer 5

showHide根据您所写的内容，您将在 html 和 javascript （内部函数）中添加事件。也许您可以将您的 js 代码更改为：

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