(modifié le 4 novembre 2014 à 20:16)

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 :

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 nouvelles techno, suivez-moi sur twitter