时间戳

首页 > 解决方案 > 是否可以使用 javascript 更改 using id 内的输入元素的输入类型？

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

问题描述

我有一个密码类型的输入元素，它位于<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";
              }

标签： javascripthtml

解决方案

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

推荐阅读