显示密码输入框的几种方案

在 HTML 中，有一个非常明确的输入类型用于处理密码

<input type="password">

如果您使用它，当您在其中键入时，您会得到模糊的项目符号，例如

••••••••

这是网络试图帮助提高安全性。如果没有这样做，经典的问题是有人可能在您身后偷窥，窥探您输入的内容。我猜想，这比查看您的手指按下的键更容易。

但是 UX 已经发展了一点，并且拥有类似以下选项变得更加普遍：

☑️ 显示密码？

我认为这个想法是我们应该有选择权。我们大多数人可以快速环顾四周，看看是否有窥探的眼睛，如果没有，我们可能会选择显示我们的密码，以便确保我们正确地输入了 I_luv_T@cos696969，并且不会因为输入错误 8 次而遭受痛苦。

所以！该怎么做呢？

方案 1：使用 type="password"，然后使用 JavaScript 将其替换为 type="text"

这就是现在每个人都在做的事情，因为它是在所有浏览器中都能正常工作的唯一方案。

const input = document.querySelector(".password-input");
// When an input is checked, or whatever...
if (input.getAttribute("type") === "password") {
  input.setAttribute("type", "text");
} else {
  input.setAttribute("type", "password");
}

这里的问题——除了仅仅因为您必须更改输入类型才能实现这一点而有点奇怪之外——是密码管理器工具。我希望我对此有确切的细节，但它并不让我感到意外，即更改输入类型可能会混淆任何专门设计用于查找和预填充密码的工具，甚至可能是浏览器本身内置的工具。

方案 2：在 CSS 中使用 -webkit-text-security

这不是一个真正的方案，因为您不能只让一项重要功能在某些浏览器中工作，而在其他浏览器中不工作。但显然，在某些时候，人们希望将此功能迁移到 CSS，因为它确实在某些浏览器中有效。

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

方案 3：CSS 中的 input-security

有一个 输入安全 的编辑器草案规范。它基本上是一个切换值。

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

我喜欢它。简单。但我认为还没有任何浏览器支持它。因此，实际上，我们目前只能使用方案 #1。

演示，全部放在一起