Tutoriel vidéo jQuery : Les évènements Focus/Blur

Tutoriel jQuery

Dans ce tutoriel vidéo vous verrez comment utiliser les évènement blur et focus afin de vider un champs de texte lorsqu'il est sélectionné. Dans un premier temps, vous apprendrez à utiliser ces évènements depuis le code HTML et dans un deuxième temps vous apprendrez à créer un script qui permet de généraliser ce comportement.

Démonstration

Tags : InputBlurFocus

Tutoriel jQuery posté Vendredi 08 Janvier 2010
 16 Commentaires
Ils l'ont utilisé
Vos commentaires
Laisser un commentaire

Badbart (Vendredi 08 Janvier 2010 à 13:27):

Une base de javascript ça ^^

RezA (Vendredi 08 Janvier 2010 à 13:47):

Salut, l'idée est bonne d'automatiser le tout, merci.

nicolas.c (Vendredi 08 Janvier 2010 à 14:39):

Cool merci =D

Aussi une question:

Comment on fait pour personnalisez les boutons du type Validez?

Badbart (Vendredi 08 Janvier 2010 à 15:03):

Toi tu as pas du chercher sur google. Tu le personnalise comme presque tout, en CSS !
input[type=submit]{ background:url(image.xxx); etc; etc; }

Sur ce site tu as le tuto pour personnaliser les champs input, tu peux t'en inspirer :
http://www.grafikart.fr/tutoriels/video/personnaliser-formulaire-html-29

nicolas.c (Vendredi 08 Janvier 2010 à 16:12):

J'ai cherchez sur google. Il m'a affichez un tuto qui lui n'a pas marchez!

Autrement merci beaucoup Bart =)

jj31 (Vendredi 08 Janvier 2010 à 15:07):

J'adore tout ce qui me fait moins travailler, c'est cool.

tibeoh (Vendredi 08 Janvier 2010 à 18:11):

Ah merci Grafikart d'avoir réaliser ce tutoriel dont j'avais fait la demande =) !
Je t'avoue que la première méthode je la connaissais mais mon but était de la réaliser avec jQuery pour avoir les avantages que tu as cité =) !

J'ai compris le principe, mais je reste sceptique par rapport à la fonction jQuery each que tu utilises... Malgré la documentation je ne vois pas ce qu'elle "fait" vraiment...

Merci d'avance de ta réponse !

cerise (Vendredi 08 Janvier 2010 à 20:42):

Vraiment pratique....avec jQuery
Merci de nous l'expliquer aussi bien

Synops229 (Samedi 09 Janvier 2010 à 10:11):

Ce tutoriel est très sympa pour les nouveau dans le javascript, merci Grafikart.

Quent1du58 (Samedi 09 Janvier 2010 à 14:10):

Merci pour le tuto (même si à deux jours près ça aurait été encore mieux ;-) )

Djiins (Samedi 09 Janvier 2010 à 20:34):

Simple, court, et précis toujours aussi efficace !!

pacintosh (Mardi 12 Janvier 2010 à 00:42):

Pas mal, merci bcp pour le tuto.

Ravi (Mardi 23 Février 2010 à 11:00):

Simple et efficace

nekomata (Mardi 02 Mars 2010 à 02:35):

Merci pour ce code.

Je voulais dire plus haut que son utilisation dans un formulaire implique deux choses : modifier la validation des champs pour que la valeur par défaut compte pour un champ vide, et modifier la façon dont on réaffiche les données en cas d'erreur.

Ici, un simple echo ne suffit pas et pose problème avec ce script.
Il faut rajouter un test, du genre :

. variable = valeur par defaut
. si on a une donnee post, et si elle est différente de valeur par defaut, on attribue sa valeur à variable
--- on affiche variable // modifiée avec la valeur tapée par l'utilisateur
. sinon
--- on affiche variable // avec sa valeur par defaut

Dimitri (Mercredi 03 Mars 2010 à 13:23):

Toujours aussi simple et rapide !!

I love Grafikart !

quent1du58 (Mardi 31 Août 2010 à 13:15):

On pourrais utiliser onload pour remplir les champs ce qui éviterais aux personnes ne possédant pas JS d'effacer le texte.

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel