Wie wandele ich ein Texteingabefeld nur mit CSS in ein Passwortfeld um?

So lassen Sie ein Eingabefeld nur mit CSS wie ein Passwortfeld aussehen

In der Webentwicklung ist es manchmal notwendig, einen Text anzuzeigen Eingabefeld als Passwortfeld mit versteckten Zeichen, um die Privatsphäre des Benutzers zu gewährleisten. Dies kann vollständig durch CSS erreicht werden, auch ohne HTML zu ändern oder JavaScript zu verwenden.

CSS-Lösung:

Um ein Texteingabefeld in ein passwortähnliches Feld umzuwandeln , CSS bietet einen experimentellen Selektor namens -webkit-text-security (oder text-security). Dieser Selektor steuert das visuelle Erscheinungsbild von Eingabefeldern und kann zum Festlegen der Anzeigesicherheit für Texteingaben verwendet werden.

Implementierung:

Um diese Lösung zu verwenden, wenden Sie Folgendes an: webkit-text-security oder text-security selector auf das gewünschte Eingabefeld und setzen Sie den Wert auf Disc oder ein anderes gewünschtes Zeichen. Hier ist ein Beispiel:

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

Verwendung:

Um die Anzeige zwischen einem Text- und einem Passwortfeld umzuschalten, können Sie dem Formular eine Schaltfläche hinzufügen und JavaScript verwenden Fügen Sie die pw-Klasse zum Eingabefeld hinzu oder entfernen Sie sie.

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

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

Browserkompatibilität:

Der -webkit-text-security-Selektor wird in modernen Browsern unterstützt, z Chrome, Safari und Opera. Für die IE8-Unterstützung können Sie den Textsicherheitsselektor verwenden.

Zusätzliche Hinweise:

Diese Lösung wirkt sich hauptsächlich auf die visuelle Darstellung aus und verhindert nicht die Kopier-/Einfügefunktion Standard. Sie können jedoch zusätzliche Maßnahmen in CSS oder JavaScript implementieren, um das Kopieren und Einfügen aus dem Eingabefeld einzuschränken.

Das obige ist der detaillierte Inhalt vonWie wandele ich ein Texteingabefeld nur mit CSS in ein Passwortfeld um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!