?
This document uses PHP Chinese website manual Release
<input>類型的元素"password"為用戶提供了安全輸入密碼的方式。該元素以單行純文本編輯器控件呈現(xiàn)，其中文本被遮蔽以致不能被讀取，通常通過用諸如星號（“*”）或點（“?”）之類的符號來替換每個字符， ）。這個字符會根據(jù)用戶代理和操作系統(tǒng)而有所不同。
入門過程的具體細節(jié)可能因瀏覽器而異; 移動設備，例如，經常顯示鍵入的字符片刻之前，讓用戶確定他們按下了他們打算按的鍵; 這是有用的，因為鍵的小尺寸和容易的錯誤的一個可以按下，特別是在虛擬鍵盤上。
任何涉及密碼等敏感信息的形式（例如登錄表單）應通過HTTPS提供; Firefox現(xiàn)在實現(xiàn)了多種機制來警告不安全的登錄表單 - 請參閱不安全的密碼。其他瀏覽器也正在實施類似的機制。
<input id="userPassword" type="password">
值 | 表示密碼的DOMString，或者為空 |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 自動完成，輸入模式，最大長度，最小長度，模式，占位符，只讀，必需和大小 |
IDL屬性 | selectionStart，selectionEnd，selectionDirection和value |
方法 | select（），setRangeText（）和setSelectionRange（） |
值
該value屬性包含DOMString其值是用于輸入密碼的文本編輯控件的當前內容。如果用戶還沒有輸入任何東西，這個值是一個空字符串（""）。如果required指定了該屬性，那么密碼編輯框必須包含一個非空字符串的值才是有效的。
如果pattern指定了該屬性，"password"則只有該值通過驗證時才會將控件的內容視為有效;。
如果pattern指定了該屬性，"password"則只有在該值通過驗證時才會將控件的內容視為有效。
使用密碼輸入
密碼輸入框通常與其他文本輸入框一樣工作; 主要區(qū)別在于內容的模糊，以防止用戶附近的人閱讀密碼。
一個簡單的密碼輸入
在這里我們看到了最基本的密碼輸入，使用<label>元素建立了一個標簽。
<label for="userPassword">Password:</label><input id="userPassword" type="password">
允許自動完成
要允許用戶的密碼管理器自動輸入密碼，請指定autocomplete屬性。對于密碼，通常應該是以下之一：
"on"允許瀏覽器或密碼管理器自動填寫密碼字段。這不像使用其中的任何一個"current-password"或更多"new-password"。
"off"不要讓瀏覽器或密碼管理器自動填寫密碼字段。請注意，某些軟件會忽略此值，因為這對用戶維護安全密碼操作的能力通常是有害的。
"current-password"允許瀏覽器或密碼管理器輸入網(wǎng)站的當前密碼。這提供了比這更多的信息"on"，因為它允許瀏覽器或密碼管理器自動輸入當前網(wǎng)站的當前密碼，而不是建議一個新的密碼。
"new-password"允許瀏覽器或密碼管理器為網(wǎng)站自動輸入新密碼;這是用于“更改密碼”和“新用戶”表單，在現(xiàn)場詢問用戶一個新的密碼。新密碼可能以各種方式生成，具體取決于正在使用的密碼管理器。它可能只是填寫一個新的建議密碼，或者可能會向用戶顯示一個創(chuàng)建密碼的界面。
<label for="userPassword">Password:</label><input id="userPassword" type="password" autocomplete="current-password">
使密碼成為強制性的
為了告訴用戶瀏覽器在提交表單之前密碼字段必須有一個有效的值，只需指定布爾required屬性。
<label for="userPassword">Password:</label><input id="userPassword" type="password" required>
指定一個輸入模式
如果您推薦的（或必需的）密碼語法規(guī)則將從標準鍵盤的替代文本輸入界面中受益，則可以使用該inputmode屬性來請求特定的輸入界面。最明顯的用例是密碼必須是數(shù)字（如PIN）。例如，帶有虛擬鍵盤的移動設備可能會選擇切換到數(shù)字鍵盤布局而不是全鍵盤，以便更輕松地輸入密碼。
<label for="pin">PIN:</label><input id="pin" type="password" inputmode="numeric">
設置長度要求
像往常一樣，您可以使用minlength和maxlength屬性來確定密碼的最小和最大可接受長度。此示例通過指定用戶的PIN碼必須至少為四位且不多于八位來擴展前一個示例。該size屬性用于確保密碼輸入控件是八個字符寬。
<label for="pin">PIN:</label><input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8">
選擇文字
與其他文本輸入控件一樣，您可以使用該select()方法來選擇密碼字段中的所有文本。
HTML
<label for="userPassword">Password</label><input id="userPassword" type="password" size="12"><button id="selectAll">Select All</button>
JavaScript
document.getElementById("selectAll").onclick = function(event) {
document.getElementById("userPassword").select();}Result
您還可以使用selectionStart和selectionEnd獲?。ɑ蛟O置）當前選擇的控件中的哪些字符范圍，以及selectionDirection知道哪個方向選擇發(fā)生（或將被擴展，取決于您的平臺;請參閱其文檔以獲得解釋）。但是，鑒于案文模糊不清，這些案文的用處有限。
驗證
如果您的應用程序對輸入的密碼的實際內容有字符集限制或任何其他要求，您可以使用該pattern屬性建立一個正則表達式來自動確保您的密碼滿足這些要求。
在這個例子中，只有由至少四個和不超過八個十六進制數(shù)字組成的值是有效的。
<label for="hexId">Hex ID:</label><input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
title="Enter an ID consisting of 4-8 hexadecimal digits">disabled
此布爾屬性指示密碼字段不可用于交互。此外，禁用的字段值不會與表單一起提交。
Examples
請求社會安全號碼
此示例僅接受與有效的美國社會安全號碼格式相匹配的輸入。這些用于美國稅收和身份識別的數(shù)字的形式是“123-45-6789”。也存在針對每個組中允許的值的分類規(guī)則。
HTML
<label for="ssn">SSN:</label><input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12"
pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
required autocomplete="off"><br><label for="ssn">Value:</label><span id="current"></span>這使用一個pattern將輸入的值限制為代表合法Socal安全號碼的字符串。顯然，這個正則表達式不能保證有效的SSN（因為我們沒有訪問社會安全管理局的數(shù)據(jù)庫），但確實可以確保這個數(shù)字是一個; 它通常會避免無效的值。另外，它允許三組數(shù)字由一個空格，一個短劃線（“ - ”）或什么也不分開。
將inputmode被設置為"number"鼓勵使用虛擬鍵盤的設備切換到數(shù)字鍵盤的布局更容易進入。的minlength和maxlength屬性被設置為9和12，分別為要求該值至少為9，并且不超過12個字符（前者沒有數(shù)字的基團和與它們后者之間分離字符）。該required屬性用于表示該控件必須有一個值。最后，autocomplete設置為"off"避免密碼管理器嘗試設置其值，因為這根本不是密碼。
JavaScript
這只是一些簡單的代碼來顯示屏幕上輸入的SSN，所以你可以看到它。顯然，這樣做會破壞密碼字段的用途，但是對于實驗來說是很有幫助的pattern。
var ssn = document.getElementById("ssn");var current = document.getElementById("current");ssn.oninput = function(event) {
current.innerHTML = ssn.value;}Result
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
WHATWG HTML生活標準該規(guī)范中'<input type ='password'>''的定義。 | 生活水平 | 初始定義 |
HTML 5.1該規(guī)范中<input type =“password”>“的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
accesskey | 1.0 | (Yes) | 6 | 1.0 | ? |
autocomplete | 17.0 | 4.0 (2.0) | 5 | 9.6 | 5.2 |
autofocus | 5.0 | 4.0 (2.0) | 10 | 9.6 | 5.0 |
disabled | 1.0 | 1.0 (1.7 or earlier)4 | 6 | 1.0 | 1.0 |
form | 9.0 | 4.0 (2.0) | ? | 10.62 | ? |
formaction | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
formenctype | 9.0 | 4.0 (2.0) | 10 | 10.62 | ? |
formmethod | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
formnovalidate | 5.01 | 4.0 (2.0) | 10 | 10.62 | ? |
formtarget | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
inputmode | No support | No support | No support | No support | No support |
maxlength | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
minlength | 40.0 | ? | ? | ? | ? |
name | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
pattern | 5.0 | 4.0 (2.0) | 10 | 9.6 | No support |
placeholder | 10.0 | 4.0 (2.0) | 10 | 11.00 | 5.0 |
readonly | 1.0 | 1.0 (1.7 or earlier) | 62 | 1.0 | 1.0 |
required | 5.0 103 | 4.0 (2.0) | 10 | 9.6 | No support |
size | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
Crossed out lock in address bar to indicate insecure login page | Implementing something similar | 51 (51) | ? | ? | ? |
Message displayed next to password field to indicate insecure login page, plus autofill disabled | No support | 52 (52) | No support | No support | No support |
Feature | Chrome mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
accesskey | ? | ? | ? | ? | ? |
autocomplete | ? | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
autofocus | 3.2 | 4.0 (2.0) | ? | (Yes) | ? |
disabled | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
form | ? | ? | ? | ? | ? |
formaction | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
formenctype | ? | ? | ? | ? | ? |
formmethod | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
formnovalidate | ? | 4.0 (2.0) | ? | 10.62 | ? |
formtarget | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
inputmode | No support | No support | No support | No support | No support |
maxlength | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
minlength | ? | ? | ? | 27.0 | ? |
name | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | 1.0 |
pattern | ? | 4.0 (2.0) | ? | (Yes) | (Yes) |
placeholder | 2.3 | 4.0 (2.0) | ? | 11.10 | 4 |
required | ? | (Yes) | ? | (Yes) | ? |
size | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
Crossed out lock in address bar to indicate insecure login page | Implementing something similar | 51.0 (51) | ? | ? | ? |
Message displayed next to password field to indicate insecure login page, plus autofill disabled | No support | 52.0 (52) | No support | No support | No support |