Maison > interface Web > js tutoriel > jQuery implémente l'effet d'espace réservé HTML5 example_jquery

jQuery implémente l'effet d'espace réservé HTML5 example_jquery

WBOY
Libérer: 2016-05-16 16:27:59
original
1648 Les gens l'ont consulté

Vous devez connaître le nouvel attribut placeholder en HTML5, n'est-ce pas ? Ce n’est pas grave si vous ne le savez pas. Si la zone de saisie contient du texte par défaut, un tel effet est souvent nécessaire. Cliquez pour faire disparaître le texte par défaut et faire apparaître le texte par défaut après avoir perdu le focus.

Aujourd'hui, je partage un morceau de code jQuery pour simuler l'effet d'espace réservé.

Code Javascript :

Copier le code Le code est le suivant :

fonction placeHolder(événement){
var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();
si(selfDataValue){
event.type == "clic" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "flou" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))
}autre{
Renvoie faux ;
>
>
$(".pInputText").on("clic flou",placeHolder);

Code HTML :

Copier le code Le code est le suivant :


Certaines personnes pourraient se demander, puisque HTML5 fournit de telles fonctions, pourquoi écrire du JS ?

N'est-ce pas absurde ? Bien sûr, c'est un problème de compatibilité si IE était plus compatible avec HTML5, qui serait prêt à utiliser js pour implémenter cette chose ?

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal