密码显示输入

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

如果你使用它，你会在输入时得到省略号，比如：

••••••••

这就是网站试图帮助提高安全性。如果它没有这样做，那么典型的问题是有人可能会从你的肩膀上窥视，窥探你正在输入的内容。

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

☑️ 显示密码？

我认为这个想法是我们应该有一个选择。我们大多数人都可以快速观察一下，看看是否有窥探，如果没有，我们可能会选择透露我们的密码，这样我们就可以确保我们输入正确并且不会因为输入错误而遭受痛苦。

所以！该怎么办？

方式 1：使用 type="password"，然后将其替换为 type="text"， 使用 JavaScript 处理适用于所有浏览器。

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：-webkit-text-security 在 CSS 中使用

有人希望将 JavaScript 功能移至 CSS，但这不是一个最佳的选择，因为它确实适用于某些浏览器，有兼容问题。

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

方式 3：在 CSS 中使用 input-security

输入安全有一个 Editor's Draft 规范。它基本上是一个可以修改的值。

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

这个方式比较简单，但目前还没有任何浏览器支持它。所以，我们现在只能使用方式1。