(1 vote(s), 
Loading...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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Formulaire JS Auto-focus by Mr Xhark - http://xhark.fr.nf</title>
<style type="text/css">
.fdate {
width:40px;
}
* {
font-family:arial;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
function Compter(champ1, champ2)
{
// Nombre de caractères max (2 pour jour et mois)
var max = 2;
// Longueur actuelle du champ1
var taille = champ1.value.length
// Si le nombre de caractères est >= au nombre max autorisé, on passe au champ suivant
if (taille >= max)
{
champ2.focus();
}
}
function EffaceChamp(champ1)
{
champ1.value = "";
champ1.focus();
}
</script>
<table>
<tr class="form">
<td colspan="2">
<form id="rech" action="" method="post">
<p><label>Date de naissance</label></p>
<p><input type="text" name="jour" class="fdate" onkeyup="Compter(this,document.forms['rech'].mois)" onselect="EffaceChamp(this)" value="" />
<input type="text" name="mois" class="fdate" onkeyup="Compter(this,document.forms['rech'].annee)" onselect="EffaceChamp(this)" value="" />
<input type="text" name="annee" class="fdate" value="" onselect="EffaceChamp(this)"/>
<span class="legende">(jj/mm/aaaa)</span></p>
</form>
</td>
</tr>
</table>
</body>
</html>
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
Le premier commentaire c'est pour vous 👇