Les méthodes et un retour sur quelques événements

Parent Previous Next



Les méthodes et un retour sur quelques événements



Les formulaires ne possèdent pas uniquement des propriétés, ils possèdent également des méthodes dont certaines sont bien pratiques ! Tout en abordant leur utilisation, nous en profiterons pour revenir sur certains événements étudiés au chapitre précédent.


Les méthodes spécifiques à l'élément <form>


Un formulaire, ou plus exactement l'élément <form>, possède deux méthodes intéressantes. La première,submit(), permet d'effectuer l'envoi d'un formulaire sans l'intervention de l'utilisateur. La deuxième,reset(), permet de réinitialiser tous les champs d'un formulaire.
Si vous êtes un habitué des formulaires HTML, vous aurez deviné que ces deux méthodes ont le même rôle que les éléments <input> de type submit ou reset.


L'utilisation de ces deux méthodes est simple comme bonjour, il vous suffit juste de les appeler sans aucun paramètre (elles n'en ont pas) et c'est fini :

var element = document.getElementById('un_id_de_formulaire');

 

element.submit(); // Le formulaire est expédié

element.reset();  // Le formulaire est réinitialisé


Maintenant revenons sur deux événements : submit et reset, encore les mêmes noms ! Il n'y a sûrement pas besoin de vous expliquer quand l'un et l'autre se déclenchent, cela paraît évident. Cependant, il est important de préciser une chose : envoyer un formulaire avec la méthode submit() du Javascript ne déclenchera jamais l'événement submit ! Mais dans le doute, voici un exemple complet dans le cas où vous n'auriez pas tout compris :

<form id="myForm">

  <input type="text" value="Entrez un texte" />

  <br /><br />

  <input type="submit" value="Submit !" />

  <input type="reset" value="Reset !" />

</form>

   

<script>

  var myForm = document.getElementById('myForm');

   

  myForm.addEventListener('submit', function(e) {

      alert('Vous avez envoyé le formulaire !\n\nMais celui-ci a été bloqué pour que vous ne changiez pas de page.');

      e.preventDefault();

  }, true);

   

  myForm.addEventListener('reset', function(e) {

      alert('Vous avez réinitialisé le formulaire !');

  }, true);

</script>



La gestion du focus et de la sélection


Vous vous souvenez des événements pour détecter l'activation ou la désactivation du focus sur un élément ? Eh bien il existe aussi deux méthodes, focus() et blur(), permettant respectivement de donner et retirer le focus à un élément. Leur utilisation est très simple :

<input id="text" type="text" value="Entrez un texte" />

<br /><br />

<input type="button" value="Donner le focus" onclick="document.getElementById('text').focus();" /><br />

<input type="button" value="Retirer le focus" onclick="document.getElementById('text').blur();" />



Dans le même genre, il existe la méthode select() qui, en plus de donner le focus à l'élément, sélectionne le texte de celui-ci si cela est possible :

<input id="text" type="text" value="Entrez un texte" />

<br /><br />

<input type="button" value="Sélectionner le texte" onclick="document.getElementById('text').select();" />



Bien sûr, cette méthode ne fonctionne que sur des champs de texte comme un <input> de type text ou bien un <textarea>.


Explications sur l'événement change


Il est important de revenir sur cet événement afin de clarifier quelques petits problèmes que vous pourrez rencontrer en l'utilisant. Tout d'abord, il est bon de savoir que cet événement attend que l'élément auquel il est attaché perde le focus avant de se déclencher (s'il y a eu modification du contenu de l'élément). Donc, si vous souhaitez vérifier l'état d'un input à chacune de ses modifications sans attendre la perte de focus, il vous faudra plutôt utiliser d'autres événements du style keyup (et ses variantes) ou click, cela dépend du type d'élément vérifié.


Et, deuxième et dernier point, cet événement est bien entendu utilisable sur n'importe quel input dont l'état peut changer, par exemple une checkbox ou un <input type="file" />, n'allez surtout pas croire que cet événement est réservé seulement aux champs de texte !


En résumé

 


Créé avec HelpNDoc Personal Edition: Générer des livres électroniques EPub facilement

Site à deux balles