Avec un minimum d'astuce, nous pouvons recréer
le fonctionnement des interfaces de logiciels Windows ou Mac au sein de nos fonctions
JavaScript. Un exemple parmi tant d'autres : lors de l'enregistrement d'un produit,
le formulaire présenté pour entrer le code (permettant de valider
le logiciel) décompose souvent ce code en plusieurs cases, et saute automatiquement
à la case suivante une fois la case remplie. Appliqué au Web, il
permet de mieux gérer les entrées de numéro de carte bleue
ou de téléphone... Voici comment nous y prendre en JavaScript.
Le code
<html>
<head>
<script>
function suivant(enCours, suivant, limite)
{
if
(enCours.value.length == limite)
document.code[suivant].focus();
}
</script>
</head>
<body>
<form
name="code">
<input
type="text" maxlength="4" name="code1" size="4" onKeyUp="suivant(this,'code2',
4)">
-
<input type="text" maxlength="4" name="code2" size="4" onKeyUp="suivant(this,'code3',
4)">
-
<input type="text" maxlength="4" name="code3" size="4" onKeyUp="suivant(this,'code4',
4)">
-
<input type="text" maxlength="4" name="code4" size="4">
</form>
</body>
</html>
Notez que nous limitons tout de même
les cases à 4 caractères, afin d'empêcher l'utilisateur
de revenir en arrière et continuer à remplir la case.
Par ailleurs, grâce à la troisième variable
limite, nous pouvons définir
une taille différente pour chaque champ, directement dans
le champ...
Ajoutons une limitation : lorsque l'on utilise cette méthode,
l'utilisateur qui voudra revenir en arrière pour changer
une entrée devra utiliser la souris, la touche Tab n'étant
plus utilisable...
|
Discutez en sur 
[