Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de JavaScript

Travailler avec onBlur et onFocus

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faites vos premiers pas avec les évènements onFocus et onBlur. Vous allez entrer dans le monde de la validation de données, saisies dans un formulaire.

Transcription

Découvrons deux nouveaux événements, dans cette vidéo, il s'agit des événements « onfocus » et « onblur » qui sont particulièrement intéressants quand on travaille avec des champs de formulaire. Alors, sur cette page, un peu plus bas, eh bien, vous voyez que j'ai un formulaire avec plusieurs champs et, notamment, un champ e-mail, avec déjà une valeur vous voyez, qu'est tapée dans ce champ, c'est la valeur « votre e-mail ». Alors, si je place ma souris dans ce champ et que je clique, vous voyez que cette valeur disparaît pour me laisser taper quelque chose, et puis, quand je quitte ce champ de formulaire cette valeur réapparaît. Sauf si, quand je suis dans le champ de formulaire, je tape quelque chose, à ce moment-là, quand je quitte le champ e-mail, le « quelque chose » que j'ai tapé reste en place et n'est pas écrasé, remplacé par cette valeur, par défaut, qu'on avait tantôt, votre e-mail, par contre, si je supprime ce que j'ai tapé et que je quitte le champ, vous voyez que la chaîne de caractères, « votre e-mail », revient. Alors ici, j'ai plusieurs événements qui entrent en ligne de compte, d'abord l’événement « onfocus ». Alors, cet événement est déclenché quand je rentre dans un champ de formulaire et que le curseur devient disponible pour taper quelque chose dans ce champ. Donc ici, j'ai eu un événement « onfocus » qui s'est déclenché sur le champ « Nom ». L’événement « onblur », lui, a lieu quand on quitte le champ de formulaire, donc regardez, je vais passer, du champ de formulaire « Nom » à « E-mail », j'ai deux événements qui ont eu lieu. D'abord, un événement « onblur » sur le champ de formulaire « Nom », au moment où je l'ai quitté, et puis un événement « onfocus » sur le champ de formulaire « E-mail », au moment où je suis rentré dedans. Voilà donc comment cela se passe, ici. Alors, dans le JavaScript, qu'est-ce qu'il se passe ? D'abord, allons voir l'HTML. Vous allez voir que j'ai un champ de formulaire tout à fait classique, il se trouve ici en ligne 39, remarquez qu'il a un identifiant, il s'appelle « email », et il a aussi l'attribut « value » de l'HTML, pour mettre sa valeur de départ, au moment du chargement de la page. Alors, au niveau du JavaScript, voilà ce qui se passe, je vais évidemment, d'abord chercher dans le DOM ce champ « email » grâce à son identifiant et puis je stocke cet objet, dans la variable « emailField », vous n'êtes pas surpris, cela commence toujours comme ça. Ensuite, j'ai deux événements. L’événement « onfocus », qui est déclenché quand je rentre dans ce champ, et l’événement « onblur » qui est déclenché quand je ressors de ce champ. Alors, qu'est-ce qu'il se passe « onfocus », quand je rentre dedans ? Eh bien, j'exécute une fonction anonyme qui est ici. Cette fonction va vérifier, grâce à un « if », si la valeur de ce champ est égale à la chaîne de caractères « votre e-mail ». Si c'est le cas, on exécute la ligne 6 du JavaScript, ici, qui modifie la valeur de ce champ de formulaire pour la rendre égale à une chaîne de caractères vide. Alors, remarquez deux ou trois choses, ici. D'abord le « .value », c'est-à-dire que j'utilise, ici, la propriété « value » de cet objet « emailField », effectivement, je n'utilise pas « innerHTML », comme on l'a vu dans des vidéos précédentes, dans le cas d'un champ de formulaire, ce que je tape dans le champ de formulaire, je le retrouve disponible dans la propriété « value », du DOM. Et, je peux utiliser l'opérateur d'égalité, ici, de comparaison, le « == », pour vérifier si cette valeur est identique à autre chose, en l'occurrence, ici, la chaîne de caractères « Votre e-mail », ou bien l'opérateur d'assignation, donc le « = » simple, pour modifier, en JavaScript, la valeur de ce qui est tapé dans un champ de formulaire. Alors, qu'est-ce qu'il se passe maintenant « onblur ». « Onblur », quand je quitte ce champs, je fais l'inverse, cela veut dire que je vérifie, dans une fonction anonyme que la valeur de ce champ est bien égale à une chaîne de caractères vide, et, si c'est le cas, j’exécute la ligne 12 du JavaScript, et je modifie cette valeur pour la rendre égale, de nouveau, à la chaîne de caractères « Votre e-mail ». Remarquez que si la valeur du champs de formulaire n'est pas égale à une chaîne de caractères vide, donc si j'ai tapé quelque chose dedans, comme je l'ai fait tout à l'heure, la ligne 12, ici, du JavaScript, n'est pas exécutée, et donc, la valeur « votre e-mail » n'écrase pas ce que j'aurai, moi-même, écrit dans ce champ. Voilà comment cela fonctionne, et voilà le fonctionnement des deux événements « onfocus » et « onblur ». Alors, pour être tout à fait complet, je dois vous signaler que si vous utilisez de l'HTML 5, eh bien l'HTML 5 a introduit une nouveauté qui remplace ceci, qui vous permet de faire la même chose sans utiliser du JavaScript. Alors, je vais vous montrer comment ça marche, puisque, dans ma page HTML, j'utilise justement de l'HTML 5, regardez, le « doctype » qui est ici, au-dessus, donc la déclaration de type est bien celle de l'HTML 5, et donc, ici, plutôt que d'utiliser l'attribut « value » de mon champ « e-mail », je peux utiliser le nouvel attribut HTML 5, « placeholder », comme ceci, à ce moment-là, je ne vais plus avoir besoin de mon JavaScript, donc je vais commenter cette ligne de code, ici, pour que le navigateur ne charge plus le JavaScript. Vous verrez que, quand je retourne dans le navigateur, que je rafraîchis ma page, eh bien, même si le JavaScript n'est plus chargé, tout cela fonctionne exactement comme tout à l'heure, parce que, je vous le rappelle, en HTML 5, il y a ce « placeholder », qui fait la même chose sans que vous ayez besoin de JavaScript. Cela dit, ce que je vous ai montré ici, dans le JavaScript, reste valable, d'abord, dans le cadre de ce cours, cela m'a permis de vous montrer les événements « onfocus » et « onblur », et puis, si vous utilisez une version antérieure à HTML 5, eh bien vous aurez toujours besoin de ceci pour faire cette opération, sans compter, bien sûr, que ces événements, « onfocus » et « onblur », peuvent également servir à d'autres choses.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !