The Options for Password Revealing Inputs

HTML provides input types that specifically handle passwords:

<input type="password">

With this type, points that are displayed as blurry when input:

•••••••••

This is a measure taken by web pages to enhance security. Without this feature, it is easy for others to get your password by peeping.

However, the user experience is also constantly improving, and now there is usually an option:

☑️ Show password?

This way the user can choose whether to display the password. Most users can look around before entering their password, confirm that no one is peeping, and then choose to display the password to make sure that they have entered the password correctly and avoid the trouble caused by entering the wrong password multiple times.

So, how to achieve it?

Method 1: Use JavaScript to switch type="password" and type="text"

This is the most commonly used method at the moment because it works fine in all browsers.

 const input = document.querySelector(".password-input");
// When the check box is selected...
if (input.getAttribute("type") === "password") {
  input.setAttribute("type", "text");
} else {
  input.setAttribute("type", "password");
}

The problem with this method is that it needs to implement password display/hide functionality by changing the input type, which seems a bit strange. More importantly, it may conflict with the password manager tool. Modifying the input type may cause the password manager (including the browser's built-in password manager) to be unrecognized or automatically fill the password.

Method 2: Use -webkit-text-security in CSS

This is not a viable solution, as this property is only valid in some browsers. But it's obvious that someone once wanted to migrate this feature into CSS because it does work in some browsers.

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

Method 3: Use input-security in CSS

There is currently a draft editorial specification for input-security . It is essentially a toggle value.

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

This method is concise and clear. But no browser supports it yet. Therefore, we can only use Method 1 at present.

Demo (all methods)

The above is the detailed content of The Options for Password Revealing Inputs. For more information, please follow other related articles on the PHP Chinese website!