在HTML中，有一个非常明确的输入类型用于处理密码。
<input type="password">
如果你使用这个，当你输入时就会得到混淆的弹出点，比如。
--------
这就是网络试图帮助解决安全问题。如果它不这样做，典型的问题是有人可能在你的肩膀上窥视，偷看你输入的内容。我想，这比看你的手指按了什么键更容易。
但用户体验已经有了一些变化，现在有一个选项更常见，比如。
☑️揭开密码？
我认为这个想法是，我们应该有一个选择。我们大多数人都可以快速查看一下，看看是否有偷窥者，如果没有，我们可能会选择透露密码，这样我们就可以确保我们正确输入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。 i**nput-security**在CSS中
有一个关于输入安全的编辑草案规范。它基本上是一个切换值。
form.show-passwords input[type="password"] {
input-security: none;
}
我喜欢它。很简单。但我认为还没有任何浏览器支持它。所以，从现实的角度看，我们现在只能用1号方案了。
