Kann ich eine Texteingabe mithilfe von CSS so gestalten, dass sie ein Passwortfeld nachahmt?

Texteingaben so gestalten, dass sie Passwortfeldern ähneln

Frage:

Ist es möglich, ein Eingabeelement mit Typ= zu erstellen? „Text“ erscheint identisch mit einem Text mit „type="password"“ (d. h. die tatsächliche Eingabe wird ausgeblendet), wenn nur CSS verwendet wird?

Antwort:

Ja, das können Sie erreichen Dieser Effekt kann mithilfe des experimentellen CSS-Selektors -webkit-text-security erzielt werden:

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

In dieser CSS-Regel zielen -webkit-text-security und text-security auf Eingabeelemente mit der Klasse pw und geben an, dass die Eingabe sollte Disc-Zeichen (•) anzeigen, um die Eingabe des Benutzers zu verdecken.

Zur Veranschaulichung betrachten Sie den folgenden HTML-Code:

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling
.classList.toggle('pw')">Toggle '•'</button></code>

Wenn Sie mit diesem Element interagieren, werden Sie eine Umschalttaste bemerken Dadurch wird zwischen der Anzeige der Eingabe als Klartext und der Unkenntlichmachung mit Disc-Zeichen umgeschaltet.

Das obige ist der detaillierte Inhalt vonKann ich eine Texteingabe mithilfe von CSS so gestalten, dass sie ein Passwortfeld nachahmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!