HTML5 coopère avec CSS3 pour implémenter une zone de saisie avec un texte d'invite (débarrassez-vous de js)_html5 compétences du didacticiel

Je n'ai pas écrit d'article technique depuis longtemps. Récemment, j'ai développé un système utilisant Webkit comme support. Bien sûr, je dois utiliser beaucoup de HTML5 et de CSS3, ce qui réduit non seulement beaucoup de JS mais aussi. assure un développement plus fluide.

Lorsque la boîte de dialogue est sélectionnée, le texte de l'invite devient plus clair et disparaît après la saisie. La pratique courante consiste désormais à ajouter une étiquette après l'étiquette d'entrée. Utilisez le contrôle JS.
Après la sortie du HTML5, nous avons une meilleure solution.

Copier le code

Le code est le suivant :

Nous voyons qu'il existe une balise d'espace réservé, qui peut être utilisée comme invite de texte utilisateur. C'est très pratique. Mais pour être le plus parfait, nous devons alléger le texte ou modifier le style du fichier d'invite après l'avoir sélectionné. Que devons-nous faire ?

Copier le code

Le code est le suivant :

input::-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, un CSS unique à webkit qui peut être contrôlé Le style de texte à l'intérieur, combiné aux effets d'animation et aux pseudo-classes de CSS3, nous pouvons facilement créer une zone de saisie animée, ce qui est très approprié pour la connexion au système, la recherche, etc. Bien entendu, si vous souhaitez être compatible avec IE6, cette méthode ne fonctionnera pas. Cependant, Ie9 prend également en charge les balises d'espace réservé, mais sa couleur ne peut pas être modifiée.
Alors, que dois-je faire s'il n'est pas pris en charge ? Vous pouvez simplement utiliser Jquery directement pour vous aider, cela dépasse donc le cadre de cet article.
Donnez-moi une démo,
Adresse de la démo Vous devez utiliser le navigateur Webkit pour voir le plein effet. N'est-ce pas très pratique ?