“显示/隐藏密码”的多种实现

在HTML里，我们会使用input标签去处理密码。
就像这样：

1	<input type="password">

如果你使用它，你会在输入时字符会变成这样的小圆点 •••••••

那是因为浏览器试图帮助提高安全性。如果它没有这样做，那么有人可能会从你的身边偷看你正在输入的内容。这应该比查看手指在键盘上按下的键更容易。

但是现在 UX 已经发生了一些变化，并且更常见的选项是：

我觉得显示/隐藏密码是个很通用的场景。这样我们就可以确保正确输入，并且不会遭受打错字的痛苦。

所以！该怎么办？

1: 使用 type=”password”, 然后使用JavaScript切换到 type=”text”

这就是现在大家通常会做的事情，因为它现在实际上适用于所有浏览器。

const input = document.querySelector(".password-input");
if (input.getAttribute("type") === "password") {
  input.setAttribute("type", "text");
} else {
  input.setAttribute("type", "password");
}

这里的问题是除了你必须为此更改输入类型有点奇怪之外，还有是对密码管理器工具失效。

2: 在CSS使用 -webkit-text-security

这不是一个特别通用的方案，因有些浏览器不支持这个属性。

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

3: 在CSS使用 input-security

现在有个关于input security提案，我没可以切换input-security的值。我觉得这是一个比较好的提案，但是现在大多数浏览器还不支持，所以严格意义上说，我还只能用方案1。

1
2
3

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