Question

我想在仅使用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>

Answer 1

每次单击按钮都会绑定点击事件。您不需要多个事件处理程序。另外，您在每次点击时都会重新定义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>

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

您无需维护一个额外的“pwShown”变量来决定是显示文本还是隐藏文本。您需要做的就是检查“pwd”元素的“type”属性，如下所示：

Working Example

JavaScript：

{{ object.name }}
{{ object.biography }}

HTML：

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

Answer 4

请按以下步骤操作：下载下面给出的图像。制作一个文件夹。将您的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 5

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

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

Answer 6

变量＆＃34; pwShown＆＃34;在Javascript代码的else部分拼写错误（如＃34; pwShow＆＃34;）。因此，pwShown永远不会重置为0。

Answer 7

这是对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>

Answer 8

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

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

Answer 9

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

Answer 10

我们可以使用onclick事件来获取示例，这很简单

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

Answer 11

简单的内联解决方案：

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

Answer 12

每次调用showHide（）函数时，在代码中，pwShown变量设置为0。

您需要将pwShown变量声明为全局变量。

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

Answer 13

转储眼睛图像，而是根据其状态使用显示“显示”或“隐藏”的按钮。然后，您只需单击按钮的文本。您可以将按钮样式化为无边框，并且最初具有与其周围环境相同的背景。通过设置.show突出显示按钮：悬停以使按钮的背景变亮或者使显示/隐藏文本的颜色变亮。通过将输入和按钮放在相同的范围内，您将使它们都内联（CSS - span {display：inline-block;}）并垂直对齐相同的底部。

在空间的span下方使用普通文本输入来显示验证错误警报。确保其标签索引为-1，其背景颜色为＆amp;边界与周围环境相同。

  .
  .
  .

  <span class="pwSpan">
    <input type="password" placeholder="Password" id="pwd"  class="masked"  name="password" onblur="return checkPassword();"/>
    <button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" >
    </button>
  </span>
  <input type="text" class="error" name="pwErr" value="" tabIndex="-1" />
  .
  .
  .

function showHide()
{
   const pwField = document.getElementById("pwd");
   const showHideValue = document.getElementById("show").value;

   if(showHideValue.trim() === "Show")
   {
      showHideValue = "Hide";
      pwField.setAttribute('type', 'text');
   }
   else 
   {
      showHideValue = "Show";
      pwField.setAttribute('type', 'password');
   }
}

Answer 14

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

另请参阅https://www.w3schools.com/howto/howto_js_toggle_password.asp

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

14 个答案: