Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

GESTION DES EVENEMENTS LIES AUX FORMULAIRES EN JQUERY

Les évènements des formulaires

Les formulaires constituent un aspect important du HTML. Certains évènements vont être spécifiques aux formulaires, notamment les évènements liés au focus (le fait d’avoir placé son curseur dans un champ).

Dans cette partie, nous allons étudier les évènements les plus communs liés aux formulaires et voir comment les prendre en charge en jQuery.

Gérer le focus en jQuery

Le focus correspond au fait d’avoir son curseur placé dans un certain élément (généralement un champ de texte).

Le jQuery nous propose deux méthodes pour détecter et gérer le focus sur un élément : les méthodes focus() et focusin().

La différence entre ces deux méthodes se situe dans le support de la phase de bouillonnement ou pas. En effet, la méthode focusin() va également détecter si un élément parent possède le focus à la différence de focus().

Illustrons cela avec un premier exemple simple utilisant la méthode focus(). Dans cet exemple, nous allons changer la couleur de fond d’un élément lorsque celui-ci possède le focus.

Utilisation de la méthode jQuery focus()

Essayer ce code

Prenons maintenant un deuxième exemple pour bien comprendre la différence entre focus() et focusin(). Dans cet exemple, on va vouloir détecter l’évènement focus à partir d’un élément fieldset qui regroupe plusieurs champs de notre formulaire.

Grâce à focusin(), cela va être possible lorsqu’on va donner le focus à l’un de nos champs de formulaire (vous pouvez également essayer avec focus() : ça ne marchera pas).

Utilisation de la méthode jQuery focusin()

Essayer ce code

Gérer l'évènement "perte de focus" en jQuery

Le jQuery nous fournit également deux méthodes pour gérer l’évènement « perte de focus » d’un élément : les méthode blur() et focusout().

La différence entre ces deux méthodes va être la même que précédemment : la méthode blur() ne va s’exécuter que si un élément bien précis perd le focus tandis que la méthode focusout() va s’exécuter si l’élément ou n’importe lequel de ses éléments enfants perd le focus.

Très souvent, nous utiliserons focus() avec blur() et focusin() avec focusout().

Voyons ensemble deux exemples, un premier utilisant focusin() et focusout() et un second avec les méthodes focus() et blur() :

Utilisation de la méthode jQuery focusout()

Essayer ce code

Utilisation de la méthode jQuery blur()

Essayer ce code

La méthode jQuery change()

Le jQuery va encore nous permettre de détecter un changement de valeur dans un champ d’un formulaire et de pouvoir réagir à cet évènement avec la méthode change().

Faites cependant attention : l’évènement change ne va bien fonctionner qu’avec les éléments input, textarea et select.

De plus, notez que l’évènement se déclenche immédiatement avec les cases à cocher, boutons radio et dans le cas de l’utilisation avec l’élément select, mais ne va se déclencher qu’après la perte de focus pour tous les autres éléments (et donc perdre beaucoup de son intérêt).

Utilisation de la méthode jQuery change()

Essayer ce code

Le code ci-dessus n’est pas compliqué à comprendre, je vous laisse l’essayer par vous même !

La méthode jQuery submit()

L’évènement submit va se déclencher lorsqu’un utilisateur tente d’envoyer un formulaire.

Nous allons pouvoir gérer cet évènement en jQuery grâce à la méthode submit(). Notez que l’évènement submit ne peut être attaché qu’à un élément form.

Utilisation de la méthode jQuery submit()

Essayer ce code

Chapitre précédent

Chapitre suivant