仅使用JavaScript，点击按钮显示/隐藏密码

Question

仅使用JavaScript，点击按钮显示/隐藏密码

20

我希望能够使用纯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);
}

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

- user0428

14个回答

24

最简单的方法是使用带有 onclick 属性的按钮来切换输入框的类型。

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

- Ameen Ra'is

6

请按以下步骤操作： 1. 下载下面提供的图片。 2. 创建一个文件夹。 3. 将您的html文件和图片放在同一个文件夹中。 4. 分别在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://istack.dev59.com/waw4z.webp";
  } else {
    a.type = "password";
    b.src = "https://istack.dev59.com/Oyk1g.webp";
  }
}

<input type="password" id="pwd">
<button onclick="show()"><img src="https://istack.dev59.com/Oyk1g.webp" id="EYE"></button>

- user8158111

6

你不需要维护一个额外的“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>

- Prateek

1

这是对Tunaki答案的改进。我们甚至不需要检查表单字段已经处于哪个状态，因为这将完全由鼠标的状态决定。这使得密码只能在短暂的时间内被查看（只要鼠标按钮在按钮上按下即可）。

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

- Mike Lewis

0

我的代码中的JQuery解决方案：（只需更改ID）。

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

- Lovro

@downvoter - 如果您能指明一个理由，我会很感激。 - Lovro

可能是问题中缺少jQuery标签。 - mplungjan

0

你的Javascript代码中，else部分中的变量"pwShown"拼写错误（写成了"pwShow"）。因此，pwShown永远不会被重置为0。

- user5952347

0

  function action() {
    var my_pass = document.getElementById("pass");
    if (my_pass.type === "password") {
      my_pass.type = "text";
    } else {
      my_pass.type = "password";
    }
  }

<input type="checkbox" onclick="action()">Show <input type="password" id="pass" value="my-secret">

- Imad Ullah

0

根据您所写的内容，您正在HTML和JavaScript中都添加事件（在showHide函数内）。也许您可以将您的js代码从现有的更改为：

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

- Mindastic

0

简单的内联解决方案：

<input type="password" id="myInput" name="myInput">
<button onclick="myInput.type = (myInput.type=='text') ? 'password' : 'text'; return false;"></button>

- Anderson Ferreira

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dfsq · Accepted Answer

每次单击按钮都会绑定点击事件。你不想有多个事件处理程序。此外，你每次单击时都重新定义变量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;
        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>