Question

我正在尝试编写一个将多个密码字段显示为文本的代码。这是我所采用的方法，我的重点是使代码尽可能短，但是似乎我所采用的方法做错了什么。

方法1：

<input type="password" class="password">
<input type="password" class="password">
<input type="checkbox" onchange="document.getElementByClassName('.password').type = this.checked ? 'text' : 'password'"> Show password

如果我使用getElementById而不是getElementByClassName，则上述方法可以正常工作

方法2： fiddle

Password: <input type="password" value="FakePSW" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

如果改用getElementByClassName，这种方法也会发生同样的问题。

Answer 1

您应该使用getElementsByClassName而不是getElementByClassName
getElementsByClassName返回一个HTMLCollection。您可以使用for进行遍历

function toogleInput(e) {
  var list = document.getElementsByClassName('password');
  for (let item of list) {
    item.type = e.checked ? 'text' : 'password';
  }
}

<input type="password" class="password">
<input type="password" class="password">
<input type="checkbox" onchange="toogleInput(this)"> Show password

如果您想要jQuery，可以使用attr()

$(".toggle-password").change(function() {
  $(".password").attr("type", this.checked ? "text" : "password")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" class="password">
<input type="password" class="password">
<input type="checkbox" class="toggle-password"> Show password

Answer 2

您要查找的函数名为getElementsByClassName。它返回一个集合，因此您必须遍历结果才能将转换应用于所有转换。

适应的方法2： fiddle

Password: <input type="password" value="FakePSW" id="myInput" class="password">
<input type="password" value="FakePSW" id="myInput2" class="password"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password

<script>
function myFunction() {
  var passwordFields = document.getElementsByClassName("password");
  for (let x of passwordFields) {
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }
}
</script>

PS：最初的问题引用了jquery，但是由于代码包含纯JavaScript，因此此答案也是如此。

通过一个复选框显示多个密码字段

2 个答案: