发表新帖
发表新帖

Show/hide password onClick of button using Javascript only

后端 未结
关注
13 894
孤城傲影
孤城傲影 2020-12-08 22:47

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

相关标签:
13条回答
  • 有刺的猬
    2020-12-08 22:47

    This is an improvement upon Tunaki's answer. We don't even care to check which state the form field is in already, because this will be entirely determined by the state of the mouse. This allows the password to be only momentarily viewed (only as long as the mouse button is held down over the button.)

    <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 讨论(0)
  • 难免孤独
    2020-12-08 22:52

    In your code everytime when you call showHide() function, pwShown variable is set to 0.

    You need to declare pwShown variable as global one.

    var pwShown = 0;
function showHide()
{
 ...
}
    0 讨论(0)
  • 难免孤独
    2020-12-08 22:53

    We can get by using onclick event, let's see example.It is very easy

    HTML

    <span>
      <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" onclick="showHide()" id="eye" />
</span>

    Javascript

    function showHide() {
                if (pwd.type == 'text') {
                    pwd.type = 'password';
                }
                else {
                    pwd.type = 'text';
                }
            }
    0 讨论(0)
  • 情深已故
    2020-12-08 22:56

    JQuery solution from my code: (just change the IDs).

    $(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });
    0 讨论(0)
  • 不思量自难忘°
    2020-12-08 22:59 

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

    0 讨论(0)
  • 面向向阳花
    2020-12-08 23:00

    Based on what you wrote, you are adding the event both in html and in javascript (inside showHide function). May be you can change your js code from what you have, to:

    function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}
    0 讨论(0)
 看不清?
提交回复
热议问题