Wie kann ich Texteingaben in einem HTML-Eingabefeld nur mithilfe von CSS erkennen?

Texteingabe mithilfe von CSS erkennen

Eine häufige Anforderung entsteht beim Anpassen von Webseiten mithilfe von CSS: die Fähigkeit zu erkennen, ob ein Eingabefeld Text enthält . Überraschenderweise wird diese Funktionalität nicht direkt von CSS bereitgestellt.

Lösungsversuche

Verschiedene Ansätze waren erfolglos, darunter die Verwendung der :empty-Pseudoklasse und die Prüfung auf leere Werte [value=""].

CSS-Platzhalter Vorgehensweise

Wenn das Eingabefeld jedoch ein Platzhalterattribut hat, bietet CSS eine Lösung: die Pseudoklasse :placeholder-shown. Diese Klasse kann verwendet werden, um zwischen einem leeren Eingabefeld und einem mit einem Platzhalter zu unterscheiden.

Implementierung

Der Schlüssel besteht darin, sicherzustellen, dass das Platzhalterattribut vorhanden ist und enthält ein nicht leerer Wert, auch wenn es nur ein einzelnes Leerzeichen ist. Hier ist ein Beispiel:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Fazit

Mit der Pseudoklasse :placeholder-shown können Sie effektiv erkennen, ob ein Eingabefeld Text enthält, selbst auf Seiten, auf denen Du hast keine Kontrolle.

Das obige ist der detaillierte Inhalt vonWie kann ich Texteingaben in einem HTML-Eingabefeld nur mithilfe von CSS erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!