是否可以在内部更改输入元素的输入类型 <td> 使用 <td> ID与JavaScript的使用？

Question

我有一个类型为password的输入元素，它位于<td> ，其ID为type="pass" 。 我想使用javascript将<td>中的输入元素的类型更改为type="text" ，我该怎么做？ 我还用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"/> 

Answer 2

将pass ID添加到输入元素，而不是与td一起使用。

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

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

Answer 3

如果没有任何效果，请尝试最简单的方法。 删除输入并重新创建。 在这里，您有使用JQuery的示例：

function showPass(){
  var x = document.getElementById("pass");
  vat type;
  if(x.type === "password") {
    type = "text";
  } else {
    type = "password";
  }
  $("#pass").html("<input type='" + type + "' name="password">");
 }

Answer 4

是的。 正如您已经知道type -switch一样，您真正的问题更像是“ 如何获取具有id的元素的单个子元素？ ”。 碰巧也是input 。
例如，有firstElementChild ，但是您也可以使用querySelector()做魔术，请参见注释行。

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

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