Question

我有一个类型为password的输入元素，它位于ID为<td>的{{1}}内。我想使用JavaScript将type="pass"内的input元素类型更改为<td>，我该怎么做？我还选中了一个带有type="text"事件的复选框，以切换显示密码。

对不起，我只是一个初学者，几天前才刚开始学习javascript。

下面是我的示例代码：

onclick()

只要输入元素具有ID，我所知道的就是直接使用javascript更改输入类型。

这是我的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>

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开关了，您真正的疑问更像是“ 如何获取具有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>

是否可以使用javascript来更改using id内输入元素的输入类型？

4 个答案: