HTML DOM 输入密码对象


HTML DOM 输入密码对象与类型为“password”的<input>元素相关联。我们可以分别使用 createElement() 和 getElementById() 方法创建和访问类型为密码的输入元素。

属性

以下是密码对象的属性:

序号属性及描述
1autocomplete
设置或返回密码字段的 autocomplete 属性值。
2autofocus
设置或返回密码字段在页面加载时是否应自动获得焦点。
3defaultValue
设置或返回密码字段的默认值。
4disabled
设置或返回密码字段是否被禁用。
5form
返回包含密码字段的表单的引用。
6maxLength
设置或返回密码字段的 maxlength 属性值。
7name
设置或返回密码字段的 name 属性值。
8pattern
设置或返回密码字段的 pattern 属性值。
9placeholder
设置或返回密码字段的 placeholder 属性值。
10readOnly
设置或返回密码字段是否为只读。
11required
设置或返回在提交表单之前是否必须填写密码字段。
12size
设置或返回密码字段的 size 属性值。
13type
这是一个只读属性,返回密码字段所属表单元素的类型。
14value
设置或返回密码字段的 value 属性值。

方法

以下是密码对象的方法:

序号方法及描述
1select()
选择密码字段的内容。

语法

以下是语法:

创建输入密码对象:

var P = document.createElement("INPUT");
P.setAttribute("type", "password");

让我们来看一个输入密码对象的例子:

<!DOCTYPE html>
<html>
<head>
<script>
   function createPASS() {
      var P = document.createElement("INPUT");
      P.setAttribute("type", "password");
      document.body.appendChild(P);
   }
</script>
</head>
<body>
<p>Create an input field with type password by clicking the below button</p>
<button onclick="createPASS()">CREATE</button>
<br><br>
PASSWORD:
</body>
</html>

输出

这将产生以下输出:

点击“创建”按钮并在新创建的密码字段中输入内容后:

在上面的例子中:

我们有一个名为“创建”的按钮,它将在用户点击时执行 createPass() 方法。

<button onclick="createPASS()">CREATE</button>

createPass() 方法使用 document 对象的 createElement() 方法通过传递“INPUT”作为参数来创建<input>元素。新创建的输入元素被赋值给变量 P,并使用 setAttribute() 方法创建一个值为 password 的 type 属性。请记住,setAttribute() 方法会在属性之前不存在的情况下创建属性并赋值。最后,使用 document.body 上的 appendChild() 方法,我们将类型为 password 的输入元素作为 body 的子元素追加。

function createPASS() {
   var P = document.createElement("INPUT");
   P.setAttribute("type", "password");
   document.body.appendChild(P);
}

更新于:2019年8月22日

200 次查看

开启你的职业生涯

完成课程获得认证

开始学习
广告