Wie kann CSS das Vorhandensein von Text in Eingabefeldern auf externen Websites erkennen?

Erkennen des Vorhandenseins von Eingabetext mithilfe von CSS auf unkontrollierbaren Seiten

Das Erkennen des Vorhandenseins von Text in Eingabefeldern ist eine häufige Aufgabe, aber herkömmliche Methoden wie :empty und [value=""] funktioniert möglicherweise nicht in allen Szenarien effektiv. In Situationen, in denen JavaScript nicht zugänglich ist, können CSS-Stile genutzt werden, um dieses Ziel zu erreichen.

Verwendung von :placeholder-shown Pseudo Class

Wenn das Eingabeelement ein Platzhalterattribut enthält , kommt die Pseudoklasse :placeholder-shown ins Spiel. Diese Pseudoklasse zielt auf Eingabefelder ab, in denen der Platzhaltertext sichtbar ist, was anzeigt, dass das Feld leer ist.

Implementierung:

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

Beispielverwendung:

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

Bei diesem Ansatz erhalten die ersten beiden Eingaben die Stile, auf die sie angewendet werden :not(:placeholder-shown), da sie Text enthalten oder einen nicht leeren Platzhalterwert haben. Die dritte Eingabe, die einen Platzhalter, aber keinen Text enthält, erhält die auf :placeholder-shown angewendeten Stile.

Diese Methode ist besonders nützlich, wenn Sie mit Themen und Stilen arbeiten, die mithilfe von Browsererweiterungen wie z. B. auf Seiten von Drittanbietern angewendet werden Stilvoll, da es eine Anpassung basierend auf dem Vorhandensein oder Fehlen von Text in Eingabefeldern ermöglicht, ohne dass JavaScript erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie kann CSS das Vorhandensein von Text in Eingabefeldern auf externen Websites erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!