javascript - 是否可以通过使用 javascript 来使用 <td> id 更改 <td> 内输入元素的输入类型？

Question

我有一个密码类型的输入元素，位于 <td> 内id type="pass" 。我想更改 <td> 内的输入元素的类型至type="text"使用 javascript，我将如何做到这一点？我还用 onclick() 做了一个复选框事件来切换显示密码。

抱歉，我只是一个初学者，几天前才开始学习 javascript。

下面是我的示例代码:

        <tr>
           <td><input type="text" name="username"></td>
           <td id="pass"><input type="password" name="password"></td>
           <td><input type="checkbox" onclick="showPass()"></td> 
        </tr>

我所知道的是使用 javascript 直接更改输入类型，前提是输入元素具有 id。

这是我的 JavaScript:

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

Answer 1

将 ID 放在输入上，而不是输入所在的单元格上。此外，您可以将复选框的值传递到切换密码输入类型的函数中，以避免复选框与输入不同步。

function showPass(show) {
  var input = document.getElementById("pass");
  var label = document.getElementById("toggle-label");

  if (show) {
    input.type = "text";
    label.textContent = "Hide password";
  }
  else {
    input.type = "password";
    label.textContent = "Show password";
  }
}

<input id="pass" type="password" name="password" value="your-password" /><br/>
<label id="toggle-label" for="toggle-password">Show password</label>
<input id="toggle-password" type="checkbox" onclick="showPass(this.checked)" />

但是，我建议取消内联 onclick 并使用 Javascript 完成所有操作，如下所示...

var input = document.getElementById("pass");
var label = document.getElementById("toggle-label");
var checkbox = document.getElementById("toggle-password");

checkbox.addEventListener("change", function() {
  if (checkbox.checked) {
    input.type = "text";
    label.textContent = "Hide password";
  }
  else {
    input.type = "password";
    label.textContent = "Show password";
  }
});

<input id="pass" type="password" name="password" value="your-password" /><br/>
<label id="toggle-label" for="toggle-password">Show password</label>
<input id="toggle-password" type="checkbox"/>