Médiaforma

All posts tagged focus

Certains éléments du DOM génèrent des événements. Je les ai rassemblés dans ce tableau :

Méthode Événement géré
focus() Réception de focus par l’élément
blur() Perte de focus par l’élément
focusin() Réception de focus par l’élément ou un de ses enfants
focusout() Perte de focus par l’élément ou un de ses enfants
resize() Redimensionnement d’un élément
change() Modification d’un élément

 

A titre d’exemple, ce code utilise l’événement blur() pour tester la validité d’une zone de texte dans un formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test de la validité d'une zone de texte</title>

  </head>
  <body>
    <script src="jquery.js"></script>
    <table>
    <tr><td>Entrez un nombre compris entre 10 et 20</td><td><input type="text" id="saisie1" autofocus></td></tr>
    <tr><td>Entrez un texte</td><td><input type="text" id="saisie2"></td></tr>
    </table>
    <span id="message"></span>
    <script>
      $(function() {
        $('#saisie1').blur(function(){
          var zone1 = parseInt($('#saisie1').val());
          if ((zone1>=10) && (zone1<=20))
            $('#message').html('La valeur dans la première zone de texte entrée est valide');
          else
            $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
        });
      });
    </script>
  </body>
</html>

 

Lorsque la première zone de texte perd le focus :

$('#saisie1').blur(function(){

 

Le contenu de la zone de texte est lu et mémorisé sous une forme entière (parseInt()) dans la variable zone1 :

var zone1 = parseInt($('#saisie1').val());

 

Si la valeur saisie est dans la fourchette autorisée, un message est affiché dans le span #message :

if ((zone1>=10) && (zone1<=20))
  $('#message').html('La valeur dans la première zone de texte entrée est valide');

 

Dans le cas contraire, un autre message est affiché dans le span #message :

else
  $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');

 

Exercice

Affichez la taille de la fenêtre suite à son redimensionnement

Note : L’élément window représente la fenêtre.

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de la fenêtre au redimensionnement</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <span id="message">Redimensionnez la fenêtre</span>
    <script>
      $(function() {
        $(window).resize(function(){
          var x = $(window).width();
          var y = $(window).height();
          $('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
        });
      });
    </script>
  </body>
</html>

 

Au redimensionnement de la fenêtre :

$(window).resize(function(){

Les nouvelles dimensions de la fenêtre sont stockées dans les variables x et y :

var x = $(window).width();
var y = $(window).height();

Puis affichées dans le span d’id #message :

$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');

 

Remarque

Quelques autres événements sont dignes d’intérêt :

  • $(élément).load() est levé quand l’élément est entièrement chargé où élément peut être la page (window) ou un élément auquel est associé une URL (img, script, frame ou iframe).

  • $(window).unload() est levé quand l’utilisateur demande à changer de page


jQuery – Focus

Categories: jquery
Comments: No

Donner le focus à un élément

La méthode focus() donne le focus à l’élément de formulaire sélectionné :

<input type="text" id="data">
$('#data').focus(); // Donne le focus à l'élément #data

Quel élément a le focus ?

La méthode focus() permet également d’attacher un gestionnaire d’événements aux éléments sélectionnés dans un formulaire. Dans ce cas, sa syntaxe est légèrement différente :

sélecteur.focus(function(){
  // Traitement de l'élément sélectionné
}

 

Supposons qu’un formulaire contienne plusieurs éléments input et plusieurs textarea. Supposons également qu’un id ait été défini pour chacun d’entre eux. Le code jQuery affecte un gestionnaire d’événements aux éléments input et textarea du formulaire. Lorsque l’un de ces éléments reçoit le focus, son id est affiché dans une boîte d’alerte :

$(function() {
  var leFocus;
  $('input, textarea').focus(function(){
    leFocus = $(this).attr('id');
    alert(leFocus + ' a le focus');
  });
});

 

Exercice sur la fonction focus()

Définissez un formulaire contenant deux éléments input de type text et un élément textarea. Affectez la couleur d’arrière-plan lightgray à l’élément qui a le focus. Voici le résultat à obtenir :

 

 

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formulaire-focus</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Modification des caractéristiques de l'élément qui a le focus</h2>
    <table>
    <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
    <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
    <tr><td>Adresse</td><td><textarea id="adresse"></textarea></td></tr>
    </table>
    <script>
      $(function() {
        var leFocus;
        $('input, textarea').focus( function() {
          $('input, textarea').css('background-color','white');
          leFocus = '#' + $(this).attr('id');
          $(leFocus).css('background-color','lightgray');
        });
      });
    </script>
  </body>
</html>

 

Après avoir attaché un gestionnaire d’événements aux éléments input et textarea :

$('input, textarea').focus( function() {

 

La couleur d’arrière-plan de tous les éléments sélectionnés devient blanche :

$('input, textarea').css('background-color','white');

 

La variable leFocus contient l’id de l’élément qui a le focus :

leFocus = '#' + $(this).attr('id');

 

Il suffit maintenant de modifier la couleur d’arrière-plan de cet élément pour obtenir l’effet recherché :

$(leFocus).css('background-color','lightgray');

 

Remarque

Une variante du code précédent consisterait à affecter un arrière-plan de couleur blanche à l’élément qui a perdu le focus en utilisant la méthode blur() :

$(function() {
  var leFocus;
  $('input, textarea').focus( function() {
    leFocus = '#' + $(this).attr('id');
    $(leFocus).css('background-color','lightgray');
  });
  $('input, textarea').blur( function() {
    leFocus = '#' + $(this).attr('id');
    $(leFocus).css('background-color','white');
  });
});

 

Exercice sur la remise à zéro d’un formulaire

Définissez un bouton de remise à zéro du formulaire. Ecrivez le code jQuery nécessaire pour effacer le contenu des éléments textarea et input de type text.

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formulaire-RAZ</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Remise à zéro du formulaire en jQuery</h2>
    <table>
    <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
    <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
    <tr><td>Adresse</td><td><textarea id="adresse"></textarea></td></tr>
    </table>
    <button id="raz">Effacer le formulaire</button>
    <script>
      $(function() {
        $('#raz').on('click',function(){
          $('textarea, input[type="text"]').val('');
        });
      });
    </script>
  </body>
</html>

 

Lorsque le bouton #raz est cliqué :

$('#raz').on('click',function(){

 

Le contenu des éléments textarea et input de type text est effacé :

$('textarea, input[type="text"]').val('');

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.