Wie kann ich Text in Eingabefeldern nur mithilfe von CSS erkennen?

Text in Eingabefeldern mit CSS erkennen

CSS bietet begrenzte Optionen zum Erkennen, ob ein Eingabefeld Text enthält. Die :empty-Pseudoklasse und der [value=""]-Selektor liefern keine zufriedenstellenden Ergebnisse.

Lösung mit :placeholder-shown

Für Eingabefelder mit einem Platzhalter Attribut kann die Pseudoklasse :placeholder-shown verwendet werden. Das Platzhalterattribut definiert einen Platzhaltertext, der angezeigt wird, wenn die Eingabe leer ist. Durch die Nutzung dieser Eigenschaft kann die folgende CSS-Regel angewendet werden:

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

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

Wenn die Eingabe leer ist, wird der Platzhaltertext angezeigt und der Rand der Eingabe wird auf Rot gesetzt. Wenn der Benutzer Text eingibt, verschwindet der Platzhaltertext und die Rahmenfarbe ändert sich in Grün, was auf das Vorhandensein von Text in der Eingabe hinweist.

Einschränkungen

Diese Lösung hat Einige Einschränkungen:

• Das Eingabefeld muss über ein Platzhalterattribut verfügen.
• Der Platzhaltertext kann dies nicht leer sein. Allerdings kann ein einzelnes Leerzeichen verwendet werden, um einen unsichtbaren Platzhalter zu erstellen.

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