(Dernière modification le 12 septembre 2008 à 14:06)

But : changer automatiquement le focus sur un formulaire de saisie de date

Si vous développez des sites internet/intranet ou bien des applications web vous demandez peut-être à vos visiteurs de saisir une date (de naissance, de rendez-vous, de début, etc.).

Personnellement, je trouve assez lourd de proposer un champ découpé en trois entrées sur lesquelles il faut appuyer sur TAB ou bien cliquez dans celle que l’on souhaite pour passer à la case suivante.

A cela vous avez deux solutions :

  • n’utiliser qu’un seul champ de type : « jj/mm/aaaa » ou « jjmmaaaa »
  • réaliser un changement de case automatique dès que l’un est remplie

C’est la deuxième solution que je vous propose de découvrir :)

Le principe : admettons que vous entrez votre date de naissance et qu’elle soit 02/07/1986. Vous cliquez dans le premier champ (s’il le focus n’y est déjà pas d’office) puis vous tappez « 02″. Et là le focus (=curseur de la souris) passe automatiquement dans le champ du mois, vous tappez « 07″ puis le focus passe à l’année !

C’est tout de même plus agréable non ?

Voici le code dans une page HTML simpliste :

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
  1. &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"&gt;
  2. &lt;head&gt;
  3. &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  4. &lt;title&gt;Formulaire JS Auto-focus by Mr Xhark – http://xhark.fr.nf&lt;/title&gt;
  5. &lt;style type="text/css"&gt;
  6. .fdate {
  7. width:40px;
  8. }
  9. * {
  10. font-family:arial;
  11. font-size:12px;
  12. }
  13. &lt;/style&gt;
  14. &lt;/head&gt;
  15. &lt;body&gt;
  16.  
  17. &lt;script type="text/javascript"&gt;
  18. function Compter(champ1, champ2)
  19. {
  20. // Nombre de caractères max (2 pour jour et mois)
  21. var max = 2;
  22. // Longueur actuelle du champ1
  23. var taille = champ1.value.length
  24. // Si le nombre de caractères est &gt;= au nombre max autorisé, on passe au champ suivant
  25. if (taille &gt;= max)
  26. {
  27. champ2.focus();
  28. }
  29. }
  30.  
  31. function EffaceChamp(champ1)
  32. {
  33. champ1.value = "";
  34. champ1.focus();
  35. }
  36. &lt;/script&gt;
  37.  
  38. &lt;table&gt;
  39. &lt;tr class="form"&gt;
  40. &lt;td colspan="2"&gt;
  41. &lt;form id="rech" action="" method="post"&gt;
  42. &lt;p&gt;&lt;label&gt;Date de naissance&lt;/label&gt;&lt;/p&gt;
  43. &lt;p&gt;&lt;input type="text" name="jour" class="fdate" onkeyup="Compter(this,document.forms['rech'].mois)" onselect="EffaceChamp(this)" value="" /&gt;
  44. &lt;input type="text" name="mois" class="fdate" onkeyup="Compter(this,document.forms['rech'].annee)" onselect="EffaceChamp(this)" value="" /&gt;
  45. &lt;input type="text" name="annee" class="fdate" value="" onselect="EffaceChamp(this)"/&gt;
  46. &lt;span class="legende"&gt;(jj/mm/aaaa)&lt;/span&gt;&lt;/p&gt;
  47. &lt;/form&gt;
  48. &lt;/td&gt;
  49. &lt;/tr&gt;
  50. &lt;/table&gt;
  51. &lt;/body&gt;
  52. &lt;/html&gt;

Le fonctionnement est très simple : on précise le nombre de caractère maximal par champ, si celui-ci est atteint on passe le focus en champ suivant :)

Démo du script
Télécharger le script

Auteur : Mr Xhark

Fondateur du blog et passionné par les technologies je partage mes découvertes quotidiennement.

Tags: , , , , , , ,