HTML input type password 类型
功能介绍
<input> 元素 里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。
这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。）
这个符号会根据用户的浏览器和操作系统来具体显示哪个。
入门过程的具体细节可能因浏览器而异; 例如，移动设备经常在隐藏它之前显示键入的字符一段时间，以允许用户确定他们按下了他们意图按下的键; 考虑到按键的小尺寸以及可以轻松按下错误的按键（特别是在虚拟键盘上），这是有帮助的。
任何涉及密码等敏感信息的表格（例如登录表格）都应通过HTTPS提供; 许多浏览器现在都实现了警告不安全登录表单的机制; 请参阅Insecure passwords。
值
The value attribute contains a DOMString whose value is the current contents of the text editing control being used to enter the password. 如果用户还没有输入任何内容，则此值为空字符串（“”）。 If the required property is specified, then the password edit box must contain a value other than an empty string to be valid.
如果pattern指定了属性，“password"则仅当值通过验证时，控件的内容才被视为有效；否则，控件的内容才被视为有效。有关更多信息，请参见验证。
“password"值中不允许换行（U + 000A）和回车（U + 000D）字符。设置密码控件的值时，换行符和回车符将从该值中去除。
使用密码输入框
密码输入框通常与其他文本输入框一样工作; 主要区别在于内容模糊，以防止用户附近的人阅读密码。
一个简单的密码输入框
在这里，我们看到了最基本的密码输入，并使用了 <label> 元素.
<label for="userPassword">Password: </label>
<input id="userPassword" type="password">
允许自动补全
为了让用户的密码管理器自动输入密码，specify the autocomplete attribute. For passwords, this should typically be one of the following:
“on”
允许浏览器或密码管理器自动填写密码字段。 这不像使用“current-password”或“new-password”那样提供信息。
“off”
不让浏览器或密码管理器自动填写密码字段。 请注意，某些软件会忽略此值，因为它通常会损害用户维护安全密码操作的能力。
“current-password”
允许浏览器或密码管理器输入网站的当前密码。 这提供了比“on”更多的信息，因为它允许浏览器或密码管理器自动在该字段中输入当前已知的网站密码，但不建议新密码。
“new-password”
允许浏览器或密码管理器自动输入网站的新密码; 这用于“更改密码”和“新用户”表单，在该字段询问用户新密码。 新密码可能以多种方式生成，具体取决于使用的密码管理器。 它可能只是填写新的建议密码，或者它可能会向用户显示创建密码的界面。
<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>
<input type="submit" value="Submit">
指定输入模式
If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the inputmode attribute to request a specific one. 最明显的用例是密码必须是数字（例如PIN）。 例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。
<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric">
设置长度要求
As usual, you can use the minlength and maxlength attributes to establish minimum and maximum acceptable lengths for the password.此示例通过指定用户的PIN必须至少为4且不超过8位来扩展前一个示例。The size attribute is used to ensure that the password entry control is eight characters wide.
<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() {
document.getElementById("userPassword").select();
}
您还可以使用selectionStart和selectionEnd获取（或设置）当前在控件中选择的字符范围，并selectionDirection知道发生哪个方向选择（或将扩展到哪个方向，具体取决于您的平台；有关说明，请参见其文档）。但是，由于文本被遮盖，因此其用途受到一定限制。
验证
如果您的应用程序对输入的密码的实际内容有字符集限制或任何其他要求，则可以使用该pattern属性建立一个正则表达式，以自动确保您的密码满足这些要求。
在这个例子中，只有包含至少四个和不超过八个十六进制数字的值才是有效的。
<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
此布尔属性指示密码字段不可用于交互。 此外，禁用的字段值不会与表单一起提交。
实例
申请社会安全号码
此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税务和识别目的的数字的格式为“123-45-6789”。 还存在针对每个组中允许的值的各种规则。
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>
This uses a pattern which limits the entered value to strings representing legal Socal Security numbers. 很显然，这个正则表达式并不能保证有效的SSN（因为我们没有进入社会保障局的数据库），但它确实保证数量可能是一个号; 它通常会避免无效的值。 此外，它允许三组数字由空格，短划线（“ - ”）分隔，或者什么也不分。
将inputmode被设置为"number"鼓励使用虚拟键盘的设备切换到数字键盘的布局更容易进入。的minlength和maxlength属性被设置为9和12，分别为要求该值至少为9，并且不超过12个字符（前者没有数字的基团和与它们后者之间分离字符）。该required属性用于指示此控件必须具有一个值。最后，autocomplete设置为"off"避免密码管理器尝试设置其值，因为这根本不是密码。
JavaScript版本的实例
这只是一些简单的代码，用于在屏幕上显示输入的SSN，以便您可以看到它。 显然这会破坏密码字段的目的，但它有助于试验模式。
var ssn = document.getElementById("ssn");
var current = document.getElementById("current");
ssn.oninput = function(event) {
current.innerHTML = ssn.value;
}
参考网站:https://developer.mozilla.org/zh/docs/web/html/element/input/password
