Médiaforma

jQuery – Focus

Print Friendly

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('');
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply