密码揭示输入的选项

HTML 提供了专门处理密码的输入类型：

<input type="password">

使用此类型，输入时会显示为模糊的点：

••••••••

这是网页为了增强安全性而采取的措施。如果没有此功能，别人很容易通过偷窥来获取你的密码。

然而，用户体验也在不断改进，现在通常会提供一个选项：

☑️ 显示密码？

这样用户可以自行选择是否显示密码。大多数用户可以在输入密码前环顾四周，确认没有人在偷窥，然后选择显示密码，确保自己正确输入了密码，避免因输错密码多次而带来的困扰。

那么，该如何实现呢？

方法一：使用 JavaScript 切换 type="password" 和 type="text"

这是目前最常用的方法，因为它能够在所有浏览器中正常工作。

const input = document.querySelector(".password-input");
// 当复选框被选中时...
if (input.getAttribute("type") === "password") {
  input.setAttribute("type", "text");
} else {
  input.setAttribute("type", "password");
}

此方法的问题在于：它需要通过改变输入类型来实现密码显示/隐藏功能，这显得有些奇怪。更重要的是，它可能会与密码管理器工具冲突。修改输入类型可能会导致密码管理器（包括浏览器内置的密码管理器）无法识别或自动填充密码。

方法二：使用 CSS 中的 -webkit-text-security

这不是一个可行的方案，因为此属性只在部分浏览器中有效。但很明显，曾经有人希望将此功能迁移到 CSS 中，因为它确实在某些浏览器中有效。

input[type="password"] {
  -webkit-text-security: square;
}
form.show-passwords input[type="password"] {
  -webkit-text-security: none;
}

方法三：使用 CSS 中的 input-security

目前有一个关于 input-security 的编辑草案规范。它本质上是一个切换值。

form.show-passwords input[type="password"] {
  input-security: none;
}

这个方法简洁明了。但目前还没有浏览器支持它。因此，目前我们只能使用方法一。

演示（所有方法）

以上是密码揭示输入的选项的详细内容。更多信息请关注PHP中文网其他相关文章！