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

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


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Centrer une div

Centrer une div
6m

Marre de centrer vos éléments avec le CSS ? Dans ce nouveau tutoriel,...

Mailcheck

Mailcheck
13m

Aujourd'hui je vous propose de découvrir le plugin Mailcheck. Ce plugin...

20 commentaires
Ajouter un commentaire

wassim Il y a 8 mois Répondre

avec HTML5 c'est plus simple et génial avec l'attribut " placeholder "

<input type="text"id="searchBox" placeholder=" search ..." >

Janus Il y a 1 an Répondre

Juste un grand merci pour ton travail et un tuto au top

SNk Il y a 1 an Répondre

C'est super le tutos, je connaissais que la premère solution qui revenait à mettre direct dans le code html.

x Ap0cALyPsE zZ Il y a 2 ans Répondre

Le lien de la démonstration est mort a part sa très bon tuto gg

superdebutant Il y a 2 ans Répondre

Salut Mrs Graf! tous mes respect pour vos tutos divins

mais cependant j'ai un problème , je télécharge tes tutos postés sur dailymotion mais la lecture bloque entre la 5ème et la 10 minutes. je n'arrive pas à visionner apres avoir télécharger car mon lecteur m'affiche une erreur de codec!!! pourqoui m'affiche t-il une erreur de codec à ce moment là, car s'il ce n'etait pas compatible la vidéo ne pourrait pas s'ouvrir dès le début!....
je vous prie de m'aider j'ai une connexion faibles je ne peux pass regarder les tutos en live donc je les télécharges pour pouvoir les regarder chez moi et bossé dessus pour mes différents projet.

Merci au Raton et à tous ceux qui pourrais m'aider

jeanprudent Il y a 2 ans Répondre

simple, compréhensible, pratique ...
thanks GRAFIKART !!!

quent1du58 Il y a 2 ans Répondre

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

Dimitri Il y a 2 ans Répondre

Toujours aussi simple et rapide !!

I love Grafikart !

nekomata Il y a 2 ans Répondre

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

Ravi Il y a 2 ans Répondre

Simple et efficace

pacintosh Il y a 2 ans Répondre

Pas mal, merci bcp pour le tuto.

Djiins Il y a 2 ans Répondre

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

Quent1du58 Il y a 2 ans Répondre

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

Synops229 Il y a 2 ans Répondre

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

cerise Il y a 2 ans Répondre

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

tibeoh Il y a 2 ans Répondre

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 !

jj31 Il y a 2 ans Répondre

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

nicolas.c Il y a 2 ans Répondre

Cool merci =D

Aussi une question:

Comment on fait pour personnalisez les boutons du type Validez?

Badbart Il y a 2 ans

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 Il y a 2 ans - Répondre

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

Autrement merci beaucoup Bart =)

RezA Il y a 2 ans Répondre

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

Badbart Il y a 2 ans Répondre

Une base de javascript ça ^^

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.