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 次檢視

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告