Médiaforma

getElementById, donner le focus à une zone de saisie

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Il est parfois bien pratique de donner le focus à une zone de saisie. Par exemple, lorsque vous vous connectez sur votre moteur de recherche préféré, une barre de saisie verticale clignote dans la zone de recherche, vous invitant à entrer quelques mots pour lancer une recherche. Si une de vos pages contient un formulaire de saisie, pourquoi ne pas donner le focus à la première zone de saisie ? Je suis sûr que vos utilisateurs apprécieraient cette attention. D’autant plus qu’en JavaScript, c’est un vrai jeu d’enfant …

Pour illustrer le code JavaScript à utiliser, nous allons définir un formulaire contenant deux textes, deux zones de saisie et deux boutons de commande.

Le corps du document est écrit en HTML. Il est défini entre les lignes 16 et 23 :

  • La ligne 18 affiche un texte et une zone de saisie d’identifiant entree1.
  • La ligne 19 définit un bouton de commande, y affiche le texte « Donner le focus à la zone de saisie 1 » et met en place la fonction événementielle focus1() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.
  • La ligne 20 est semblable à la ligne 18. Si ce n’est que la zone de saisie mise en place a pour identifiant saisie2.
  • Enfin, la ligne 21 définit un deuxième bouton de commande, y affiche le texte « Donner le focus à la zone de saisie 2 » et met en place la fonction événementielle focus2() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.

Passons au code JavaScript :

  • La fonction focus1() ne contient qu’une instruction, ligne 7. Après avoir récupéré l’élément d’identifiant entree1, c’est-à-dire la première zone de texte, la fonction JavaScript focus() lui est appliquée. Cette simple instruction provoque l’apparition d’un point d’insertion clignotant dans la première zone de saisie. Toute frappe au clavier sera placée dans cette zone.
  • La fonction focus2() est en tout point identique à la fonction focus1(), si ce n’est qu’elle donne le focus à la deuxième zone de texte.

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, les deux boutons sont fonctionnels.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply