?
Ce document utilise Manuel du site Web PHP chinois Libérer
<input>類(lèi)型的元素"password"為用戶提供了安全輸入密碼的方式。該元素以單行純文本編輯器控件呈現(xiàn)，其中文本被遮蔽以致不能被讀取，通常通過(guò)用諸如星號(hào)（“*”）或點(diǎn)（“?”）之類(lèi)的符號(hào)來(lái)替換每個(gè)字符， ）。這個(gè)字符會(huì)根據(jù)用戶代理和操作系統(tǒng)而有所不同。
入門(mén)過(guò)程的具體細(xì)節(jié)可能因?yàn)g覽器而異; 移動(dòng)設(shè)備，例如，經(jīng)常顯示鍵入的字符片刻之前，讓用戶確定他們按下了他們打算按的鍵; 這是有用的，因?yàn)殒I的小尺寸和容易的錯(cuò)誤的一個(gè)可以按下，特別是在虛擬鍵盤(pán)上。
任何涉及密碼等敏感信息的形式（例如登錄表單）應(yīng)通過(guò)HTTPS提供; Firefox現(xiàn)在實(shí)現(xiàn)了多種機(jī)制來(lái)警告不安全的登錄表單 - 請(qǐng)參閱不安全的密碼。其他瀏覽器也正在實(shí)施類(lèi)似的機(jī)制。
<input id="userPassword" type="password">
值 | 表示密碼的DOMString，或者為空 |
|---|---|
活動(dòng) | 改變和輸入 |
支持的通用屬性 | 自動(dòng)完成，輸入模式，最大長(zhǎng)度，最小長(zhǎng)度，模式，占位符，只讀，必需和大小 |
IDL屬性 | selectionStart，selectionEnd，selectionDirection和value |
方法 | select（），setRangeText（）和setSelectionRange（） |
值
該value屬性包含DOMString其值是用于輸入密碼的文本編輯控件的當(dāng)前內(nèi)容。如果用戶還沒(méi)有輸入任何東西，這個(gè)值是一個(gè)空字符串（""）。如果required指定了該屬性，那么密碼編輯框必須包含一個(gè)非空字符串的值才是有效的。
如果pattern指定了該屬性，"password"則只有該值通過(guò)驗(yàn)證時(shí)才會(huì)將控件的內(nèi)容視為有效;。
如果pattern指定了該屬性，"password"則只有在該值通過(guò)驗(yàn)證時(shí)才會(huì)將控件的內(nèi)容視為有效。
使用密碼輸入
密碼輸入框通常與其他文本輸入框一樣工作; 主要區(qū)別在于內(nèi)容的模糊，以防止用戶附近的人閱讀密碼。
一個(gè)簡(jiǎn)單的密碼輸入
在這里我們看到了最基本的密碼輸入，使用<label>元素建立了一個(gè)標(biāo)簽。
<label for="userPassword">Password:</label><input id="userPassword" type="password">
允許自動(dòng)完成
要允許用戶的密碼管理器自動(dòng)輸入密碼，請(qǐng)指定autocomplete屬性。對(duì)于密碼，通常應(yīng)該是以下之一：
"on"允許瀏覽器或密碼管理器自動(dòng)填寫(xiě)密碼字段。這不像使用其中的任何一個(gè)"current-password"或更多"new-password"。
"off"不要讓瀏覽器或密碼管理器自動(dòng)填寫(xiě)密碼字段。請(qǐng)注意，某些軟件會(huì)忽略此值，因?yàn)檫@對(duì)用戶維護(hù)安全密碼操作的能力通常是有害的。
"current-password"允許瀏覽器或密碼管理器輸入網(wǎng)站的當(dāng)前密碼。這提供了比這更多的信息"on"，因?yàn)樗试S瀏覽器或密碼管理器自動(dòng)輸入當(dāng)前網(wǎng)站的當(dāng)前密碼，而不是建議一個(gè)新的密碼。
"new-password"允許瀏覽器或密碼管理器為網(wǎng)站自動(dòng)輸入新密碼;這是用于“更改密碼”和“新用戶”表單，在現(xiàn)場(chǎng)詢問(wèn)用戶一個(gè)新的密碼。新密碼可能以各種方式生成，具體取決于正在使用的密碼管理器。它可能只是填寫(xiě)一個(gè)新的建議密碼，或者可能會(huì)向用戶顯示一個(gè)創(chuàng)建密碼的界面。
<label for="userPassword">Password:</label><input id="userPassword" type="password" autocomplete="current-password">
使密碼成為強(qiáng)制性的
為了告訴用戶瀏覽器在提交表單之前密碼字段必須有一個(gè)有效的值，只需指定布爾required屬性。
<label for="userPassword">Password:</label><input id="userPassword" type="password" required>
指定一個(gè)輸入模式
如果您推薦的（或必需的）密碼語(yǔ)法規(guī)則將從標(biāo)準(zhǔn)鍵盤(pán)的替代文本輸入界面中受益，則可以使用該inputmode屬性來(lái)請(qǐng)求特定的輸入界面。最明顯的用例是密碼必須是數(shù)字（如PIN）。例如，帶有虛擬鍵盤(pán)的移動(dòng)設(shè)備可能會(huì)選擇切換到數(shù)字鍵盤(pán)布局而不是全鍵盤(pán)，以便更輕松地輸入密碼。
<label for="pin">PIN:</label><input id="pin" type="password" inputmode="numeric">
設(shè)置長(zhǎng)度要求
像往常一樣，您可以使用minlength和maxlength屬性來(lái)確定密碼的最小和最大可接受長(zhǎng)度。此示例通過(guò)指定用戶的PIN碼必須至少為四位且不多于八位來(lái)擴(kuò)展前一個(gè)示例。該size屬性用于確保密碼輸入控件是八個(gè)字符寬。
<label for="pin">PIN:</label><input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8">
選擇文字
與其他文本輸入控件一樣，您可以使用該select()方法來(lái)選擇密碼字段中的所有文本。
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(shè)置）當(dāng)前選擇的控件中的哪些字符范圍，以及selectionDirection知道哪個(gè)方向選擇發(fā)生（或?qū)⒈粩U(kuò)展，取決于您的平臺(tái);請(qǐng)參閱其文檔以獲得解釋）。但是，鑒于案文模糊不清，這些案文的用處有限。
驗(yàn)證
如果您的應(yīng)用程序?qū)斎氲拿艽a的實(shí)際內(nèi)容有字符集限制或任何其他要求，您可以使用該pattern屬性建立一個(gè)正則表達(dá)式來(lái)自動(dòng)確保您的密碼滿足這些要求。
在這個(gè)例子中，只有由至少四個(gè)和不超過(guò)八個(gè)十六進(jìn)制數(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
此布爾屬性指示密碼字段不可用于交互。此外，禁用的字段值不會(huì)與表單一起提交。
Examples
請(qǐng)求社會(huì)安全號(hào)碼
此示例僅接受與有效的美國(guó)社會(huì)安全號(hào)碼格式相匹配的輸入。這些用于美國(guó)稅收和身份識(shí)別的數(shù)字的形式是“123-45-6789”。也存在針對(duì)每個(gè)組中允許的值的分類(lèi)規(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>這使用一個(gè)pattern將輸入的值限制為代表合法Socal安全號(hào)碼的字符串。顯然，這個(gè)正則表達(dá)式不能保證有效的SSN（因?yàn)槲覀儧](méi)有訪問(wèn)社會(huì)安全管理局的數(shù)據(jù)庫(kù)），但確實(shí)可以確保這個(gè)數(shù)字是一個(gè); 它通常會(huì)避免無(wú)效的值。另外，它允許三組數(shù)字由一個(gè)空格，一個(gè)短劃線（“ - ”）或什么也不分開(kāi)。
將inputmode被設(shè)置為"number"鼓勵(lì)使用虛擬鍵盤(pán)的設(shè)備切換到數(shù)字鍵盤(pán)的布局更容易進(jìn)入。的minlength和maxlength屬性被設(shè)置為9和12，分別為要求該值至少為9，并且不超過(guò)12個(gè)字符（前者沒(méi)有數(shù)字的基團(tuán)和與它們后者之間分離字符）。該required屬性用于表示該控件必須有一個(gè)值。最后，autocomplete設(shè)置為"off"避免密碼管理器嘗試設(shè)置其值，因?yàn)檫@根本不是密碼。
JavaScript
這只是一些簡(jiǎn)單的代碼來(lái)顯示屏幕上輸入的SSN，所以你可以看到它。顯然，這樣做會(huì)破壞密碼字段的用途，但是對(duì)于實(shí)驗(yàn)來(lái)說(shuō)是很有幫助的pattern。
var ssn = document.getElementById("ssn");var current = document.getElementById("current");ssn.oninput = function(event) {
current.innerHTML = ssn.value;}Result
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
WHATWG HTML生活標(biāo)準(zhǔn)該規(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 |