Heim > Web-Frontend > CSS-Tutorial > Kann CSS Texteingaben auf externen Seiten ohne JavaScript erkennen?

Kann CSS Texteingaben auf externen Seiten ohne JavaScript erkennen?

Mary-Kate Olsen
Freigeben: 2024-12-18 19:58:11
Original
282 Leute haben es durchsucht

Can CSS Detect Text Input in External Pages Without JavaScript?

Erkennen von Texteingaben mithilfe von CSS in unkontrollierbaren externen Seiten

Um festzustellen, ob ein Eingabefeld Text ausschließlich über CSS enthält, sollten Sie Folgendes berücksichtigen mithilfe eines Platzhalterattributs. Obwohl der Platzhalter notwendig ist und nicht leer sein darf, kann er auf ein einzelnes Leerzeichen festgelegt werden.

Anwenden der CSS-Regel:

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

input:placeholder-shown {
  border-color: red;
}
Nach dem Login kopieren

Demonstration:

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />
Nach dem Login kopieren

In diesem Beispiel hat die Eingabe mit einem Platzhalter und ohne Text einen grünen Rahmen, der darauf hinweist, dass dies der Fall ist leer. Umgekehrt hat die Eingabe mit einem Platzhalter und Text oder mit einem Platzhalter und Wert, der nur Leerzeichen enthält, einen roten Rand.

Zusätzliche Hinweise:

  • Diese Methode funktioniert, weil :placeholder-shown eine Pseudoklasse ist, die mit Elementen übereinstimmt, die einen Platzhalter anzeigen.
  • :placeholder-shown wird in unterstützt alle gängigen Browser.

Das obige ist der detaillierte Inhalt vonKann CSS Texteingaben auf externen Seiten ohne JavaScript erkennen?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage