Die Optionen für die Anzeige von Passwortfeldern

In HTML gibt es einen sehr klaren Eingabetyp für die Handhabung von Passwörtern

<input type="password">

Wenn Sie diesen verwenden, erhalten Sie die verschleierten Aufzählungspunkte, wenn Sie hineintippen, wie

••••••••

Das ist das Web, das versucht, bei der Sicherheit zu helfen. Wenn es das nicht täte, wäre das klassische Problem, dass jemand über Ihre Schulter schauen und sehen könnte, was Sie eingeben. Wahrscheinlich einfacher, als zu sehen, welche Tasten Ihre Finger drücken.

Aber die Benutzererfahrung hat sich ein wenig weiterentwickelt, und es ist viel üblicher, eine Option wie diese zu haben:

☑️ Passwort anzeigen?

Ich denke, die Idee ist, dass wir eine Wahl haben sollten. Die meisten von uns können sich kurz umsehen und prüfen, ob neugierige Blicke vorhanden sind, und wenn nicht, können wir uns entscheiden, unser Passwort anzuzeigen, damit wir sicherstellen können, dass wir I_luv_T@cos696969 richtig tippen und nicht die Qual erleiden, es 8 Mal falsch einzugeben.

Also! Was tun?

Option 1: Verwenden Sie type="password" und tauschen Sie es dann mit JavaScript gegen type="text" aus

Das ist es, was gerade alle machen, weil es das ist, was im Moment tatsächlich in allen Browsern funktioniert.

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");
}

Das Problem hier – abgesehen davon, dass es irgendwie seltsam ist, dass man Eingabetypen nur für diesen Zweck ändern muss – sind Passwortmanager-Tools. Ich wünschte, ich hätte genaue Details dazu, aber es überrascht mich nicht, dass das Manipulieren von Eingabetypen jedes Tool verwirren könnte, das speziell zum Suchen und Vorabfüllen von Passwörtern entwickelt wurde, vielleicht sogar die in die Browser selbst integrierten Tools.

Option 2: Verwenden Sie -webkit-text-security in CSS

Dies ist keine wirkliche Option, da Sie keine wichtige Funktion in einigen Browsern und in anderen nicht funktionieren lassen können. Aber es gab eindeutig den Wunsch, diese Funktionalität irgendwann auf CSS zu verlagern, da sie in einigen Browsern funktioniert.

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

Option 3: input-security in CSS

Es gibt einen Editor's Draft-Standard für input security. Es ist im Grunde ein Toggle-Wert.

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

Ich mag es. Einfach. Aber ich glaube nicht, dass es bisher von einem Browser unterstützt wird. Also, ehrlich gesagt, sind wir für den Moment bei Option #1 stecken geblieben.

Demos, alle zusammen