HTML5 arbeitet mit CSS3 zusammen, um ein Eingabefeld mit Eingabeaufforderungstext zu implementieren (js entfernen)_html5-Tutorial-Fähigkeiten

Ich habe schon lange keinen technischen Artikel mehr geschrieben, da ich ein System mit Webkit als Träger entwickelt habe. Natürlich muss ich viel HTML5 und CSS3 verwenden, was nicht nur viel JS reduziert sorgt für eine reibungslosere Entwicklung.

Wenn das Dialogfeld ausgewählt ist, wird der Eingabeaufforderungstext heller und verschwindet nach der Eingabe. Die übliche Praxis besteht nun darin, nach der Eingabebezeichnung eine Beschriftung hinzuzufügen. Verwenden Sie die JS-Steuerung.
Nachdem HTML5 herauskommt, haben wir eine bessere Möglichkeit.

Code kopieren

Der Code lautet wie folgt:

Wir sehen, dass es ein Platzhalter-Tag gibt, das als Benutzertextaufforderung verwendet werden kann. Das ist sehr praktisch. Um jedoch möglichst perfekt zu sein, müssen wir den Text heller machen oder den Stil der Eingabeaufforderungsdatei ändern, nachdem wir ihn ausgewählt haben.

Code kopieren

Der Code lautet wie folgt:

Eingabe::-webkit- input-placeholder {
color: #999;
-webkit-transition: color.5s;
input:focus::-webkit-input-placeholder, input:hover::-webkit -input- placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}

-webkit-input-placeholder, ein für Webkit einzigartiges CSS Das kann gesteuert werden Der Textstil im Inneren, kombiniert mit den Animationseffekten und Pseudoklassen von CSS3, können wir leicht ein animiertes Eingabefeld erstellen, das sich sehr gut für Systemanmeldung, Suche usw. eignet. Wenn Sie mit IE6 kompatibel sein möchten, funktioniert diese Methode natürlich nicht. Allerdings unterstützt Ie9 auch Platzhalter-Tags, deren Farbe jedoch nicht geändert werden kann.
Was soll ich also tun, wenn es nicht unterstützt wird? Sie können Jquery einfach direkt zur Hilfe verwenden, daher würde dies den Rahmen dieses Artikels sprengen.
Geben Sie mir eine Demo,
Demo-Adresse Sie müssen den Webkit-Browser verwenden, um den vollständigen Effekt zu sehen. Ist das nicht sehr praktisch?