HTML | DOM 输入密码 defaultValue 属性(1)

📌 相关文章

📜 HTML | DOM 输入密码 defaultValue 属性(1)

📅 最后修改于: 2023-12-03 15:15:37.569000 🧑 作者: Mango

HTML | DOM 输入密码 defaultValue 属性

在 HTML 表单中，可以使用 <input> 元素来创建一个密码框，以便用户输入密码。这个密码框会隐藏其输入内容，以便保护用户的隐私。

defaultValue 属性

密码框的默认值可以通过设置 defaultValue 属性来实现。这个属性定义了初始值，即在密码框内显示的字符串。

<input type="password" defaultValue="mypassword">

在上面的示例中，元素的 type 属性设置为 "password"，defaultValue 属性设置为 "mypassword"。这样，当用户打开页面时，密码框中会显示 "mypassword"。

使用 defaultValue 属性

下面是一个简单的例子，使用 defaultValue 属性来设置一个初始密码。当用户点击 "Reset" 按钮时，密码框中的文本会恢复到默认值 "mypassword"。

<!DOCTYPE html>
<html>
<body>

  <h2>Password Test</h2>

  <form>
    Password: <input type="password" id="pwd" defaultValue="mypassword">
  </form>

  <br>

  <button onclick="resetPwd()">Reset</button>

  <script>
    function resetPwd() {
      document.getElementById("pwd").value = document.getElementById("pwd").defaultValue;
    }
  </script>

</body>
</html>

在上面的示例中，我们定义了一个 resetPwd() 函数，用于重置密码框的值。该函数将 value 属性设置为 defaultValue 属性的值，这样密码框中的文本就会恢复到默认值。

总结

defaultValue 属性可以用来设置密码框的默认值。它可以方便地帮助用户填写表单，同时保护用户的隐私。使用 defaultValue 属性时，需要注意在 JavaScript 中修改 value 属性，才能修改密码框中的文本。