Die Optionen für das Passwort, das Eingaben enthüllt

HTML stellt Eingangstypen bereit, die speziell Passwörter verarbeiten:

<input type="password">

Bei diesem Typ werden Punkte, die bei der Eingabe als verschwommen angezeigt werden:

•••••••••

Dies ist eine Maßnahme von Webseiten, um die Sicherheit zu verbessern. Ohne diese Funktion ist es für andere einfach, Ihr Passwort durch Peeping zu erhalten.

Die Benutzererfahrung verbessert sich jedoch auch ständig, und jetzt gibt es normalerweise eine Option:

☑️ Passwort anzeigen?

Auf diese Weise kann der Benutzer auswählen, ob das Kennwort angezeigt wird. Die meisten Benutzer können sich vor dem Eingeben ihres Kennworts umsehen, bestätigen, dass niemand einblickt, und dann das Passwort anzeigen, um sicherzustellen, dass das Passwort korrekt eingegeben hat, und die Probleme zu vermeiden, die durch mehrmals ein falsches Passwort verursacht wird.

Wie kann man es also erreichen?

Methode 1: Verwenden Sie JavaScript, um type="password" und type="text" zu wechseln.

Dies ist momentan die am häufigsten verwendete Methode, da es in allen Browsern gut funktioniert.

 const input = document.querySelector (". Passworteingabe");
// Wenn das Kontrollkästchen ausgewählt ist ...
if (input.getAttribute ("Typ") === "Passwort") {
  input.setAttribute ("Typ", "Text");
} anders {
  input.setAttribute ("Typ", "Passwort");
}

Das Problem bei dieser Methode besteht darin, dass die Funktionen/Ausblenden -Funktionen für die Kennwortanzeige implementiert werden müssen, indem der Eingabetyp geändert wird, was etwas seltsam erscheint. Noch wichtiger ist, dass es in Konflikt mit dem Kennwort -Manager -Tool in Konflikt steht. Das Ändern des Eingabetyps kann dazu führen, dass der Passwort-Manager (einschließlich des integrierten Kennwortmanagers des Browsers) nicht anerkannt oder automatisch das Kennwort füllen.

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

Dies ist keine praktikable Lösung, da diese Eigenschaft in einigen Browsern nur gültig ist. Es ist jedoch offensichtlich, dass jemand diese Funktion einmal in CSS migrieren wollte, weil es in einigen Browsern funktioniert.

 input [type = "password"] {
  -Webkit-Text-Security: Square;
}
Form.Show-Passwords input [type = "password"] {
  -Webkit-Text-Security: Keine;
}

Methode 3: Verwenden Sie input-security in CSS

Derzeit gibt es einen Entwurf der redaktionellen Spezifikation für input-security . Es ist im Wesentlichen ein Umschaltwert.

 Form.Show-Passwords input [type = "password"] {
  Eingabesicherheit: Keine;
}

Diese Methode ist prägnant und klar. Aber noch kein Browser unterstützt es. Daher können wir derzeit nur Methode 1 verwenden.

Demo (alle Methoden)

Das obige ist der detaillierte Inhalt vonDie Optionen für das Passwort, das Eingaben enthüllt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!