jQuery blur() : Détecter la perte de focus sur les éléments du DOM

Revue de la fonction jQuery blur(), sa fonctionnalité est la détection de la perte du focus sur différents éléments DOM d’une page web. L’événement opposé est jQuery focus().

Les autres fonctions de détection sont :

    • click() et dblclick()
    • keydown() et keyup()
    • mouseover() et mouseout()
    • mouseenter() et. mouseleave()

    Syntaxe de jQuery blur()

    Voyons la syntaxe de cette fonction jQuery extraite de son site officiel :

    JavaScript

    .

.

1
$(selector).blur(function)

L’événement blur() est donné lorsqu’un élément perd le focus qu’il a obtenu lorsqu’il a été cliqué par la souris ou atteint par la navigation tabulaire.

Cette fonctionnalité peut être intéressante lorsqu’on travaille avec des formulaires comportant de nombreuses entrées et des éléments avec lesquels l’utilisateur doit travailler.

Je vous explique les paramètres :

  • Sélecteur (obligatoire) : élément que nous voulons contrôler.
  • fonction (facultatif) : fonction de rappel à exécuter lorsque l’élément perd le focus.

Exemple de jQuery blur()

Voyons dans cet exemple de blur() comment détecter la perte de focus sur un élément :

JavaScript

.

1
2
3
4
5
6
7
7

.

8
9
10

$(document).ready(function()

{
$(« #text1 »).blur(function(){
$(this).css(« background-color », « #FFFFFFCC ») ;
}) ;
$(« #text2 »).blur(function(){
$(this).hide(« slow ») ;
}) ;
}) ;

J’explique le code ci-dessus:

  • Dans le premier exemple, nous détectons la perte de focus sur l’élément avec id = ‘text1’. Par la suite, nous exécutons la fonction jQuery css() et donnons un fond gris à l’entrée.
  • Dans la seconde, nous détectons la perte de focus sur l’élément avec id = ‘text2’. Ensuite, nous exécutons la fonction jQuery hide() et faisons disparaître l’entrée.

Exemple de code HTML

Je vous montre le code HTML des entrées de l’exemple :

XHTML

1
2
3

<input type= »text » value= »Première zone de texte »>

<input type= »text » value= »Second textbox »>

.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *