HTML DOM 輸入密碼物件
HTML DOM 輸入密碼物件與型別為“password”的<input>元素相關聯。我們可以分別使用 createElement() 和 getElementById() 方法建立和訪問型別為密碼的輸入元素。
屬性
以下是密碼物件的屬性:
| 序號 | 屬性及描述 |
|---|---|
| 1 | autocomplete 設定或返回密碼欄位的 autocomplete 屬性值。 |
| 2 | autofocus 設定或返回密碼欄位在頁面載入時是否應自動獲得焦點。 |
| 3 | defaultValue 設定或返回密碼欄位的預設值。 |
| 4 | disabled 設定或返回密碼欄位是否被停用。 |
| 5 | form 返回包含密碼欄位的表單的引用。 |
| 6 | maxLength 設定或返回密碼欄位的 maxlength 屬性值。 |
| 7 | name 設定或返回密碼欄位的 name 屬性值。 |
| 8 | pattern 設定或返回密碼欄位的 pattern 屬性值。 |
| 9 | placeholder 設定或返回密碼欄位的 placeholder 屬性值。 |
| 10 | readOnly 設定或返回密碼欄位是否為只讀。 |
| 11 | required 設定或返回在提交表單之前是否必須填寫密碼欄位。 |
| 12 | size 設定或返回密碼欄位的 size 屬性值。 |
| 13 | type 這是一個只讀屬性,返回密碼欄位所屬表單元素的型別。 |
| 14 | value 設定或返回密碼欄位的 value 屬性值。 |
方法
以下是密碼物件的方法:
| 序號 | 方法及描述 |
|---|---|
| 1 | select() 選擇密碼欄位的內容。 |
語法
以下是語法:
建立輸入密碼物件:
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);
}
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP