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); }
廣告