input type="password"

<input type="password">

<input>类型的元素"password"为用户提供了安全输入密码的方式。该元素以单行纯文本编辑器控件呈现，其中文本被遮蔽以致不能被读取，通常通过用诸如星号（“*”）或点（“•”）之类的符号来替换每个字符， ）。这个字符会根据用户代理和操作系统而有所不同。

入门过程的具体细节可能因浏览器而异; 移动设备，例如，经常显示键入的字符片刻之前，让用户确定他们按下了他们打算按的键; 这是有用的，因为键的小尺寸和容易的错误的一个可以按下，特别是在虚拟键盘上。

任何涉及密码等敏感信息的形式（例如登录表单）应通过HTTPS提供; Firefox现在实现了多种机制来警告不安全的登录表单 - 请参阅不安全的密码。其他浏览器也正在实施类似的机制。

<input id="userPassword" type="password">

值

该value属性包含DOMString其值是用于输入密码的文本编辑控件的当前内容。如果用户还没有输入任何东西，这个值是一个空字符串（""）。如果required指定了该属性，那么密码编辑框必须包含一个非空字符串的值才是有效的。

如果pattern指定了该属性，"password"则只有该值通过验证时才会将控件的内容视为有效; 请参阅验证以获取更多信息。

如果pattern指定了该属性，"password"则只有在该值通过验证时才会将控件的内容视为有效;请参阅验证以获取更多信息。

使用密码输入

密码输入框通常与其他文本输入框一样工作; 主要区别在于内容的模糊，以防止用户附近的人阅读密码。

一个简单的密码输入

在这里我们看到了最基本的密码输入，使用<label>元素建立了一个标签。

<label for="userPassword">Password:</label>
<input id="userPassword" type="password">

允许自动完成

要允许用户的密码管理器自动输入密码，请指定autocomplete属性。对于密码，通常应该是以下之一：

"on"允许浏览器或密码管理器自动填写密码字段。这不像使用其中的任何一个"current-password"或更多"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>

指定一个输入模式

如果您推荐的（或必需的）密码语法规则将从标准键盘的替代文本输入界面中受益，则可以使用该inputmode属性来请求特定的输入界面。最明显的用例是密码必须是数字（如PIN）。例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。

<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获取（或设置）当前选择的控件中的哪些字符范围，以及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

此布尔属性指示密码字段不可用于交互。此外，禁用的字段值不会与表单一起提交。

Examples

请求社会安全号码

此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税收和身份识别的数字的形式是“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>

这使用一个pattern将输入的值限制为代表合法Socal安全号码的字符串。显然，这个正则表达式不能保证有效的SSN（因为我们没有访问社会安全管理局的数据库），但确实可以确保这个数字是一个; 它通常会避免无效的值。另外，它允许三组数字由一个空格，一个短划线（“ - ”）或什么也不分开。

将inputmode被设置为"number"鼓励使用虚拟键盘的设备切换到数字键盘的布局更容易进入。的minlength和maxlength属性被设置为9和12，分别为要求该值至少为9，并且不超过12个字符（前者没有数字的基团和与它们后者之间分离字符）。该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

规范

浏览器兼容性