Heim > Web-Frontend > CSS-Tutorial > Wie wandele ich ein Texteingabefeld nur mit CSS in ein Passwortfeld um?

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

DDD
Freigeben: 2024-10-31 12:24:02
Original
674 Leute haben es durchsucht

How to Transform a Text Input Field into a Password Field Using Only CSS?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage