champ date réparti sur 3 zones - autotab

Version imprimable

04/04/2006, 10h54
jcaruana

champ date réparti sur 3 zones - autotab

bonjour,

mon problème est assez simple, mais j'ai vraiment du mal avec le js.

Je travaille sur une appli web dans laquelle on trouve des champs date répartis dans trois zones de texte (des input) : jour/mois/année.

Je voudrais pouvoir passer d'un champ à un autre sans utiliser la touche <tab> lorque la case est remplie. Ainsi, si on rentre 2 caractères pour la case "jour" (le controle se fait à postérieuri par Struts), on passe à la case suivante "mois" automatiquement.

après longues investigations sur le net, je trouve ce qui me semble etre le + approchant : http://www.mattkruse.com/javascript/autotab/

Mais chez moi, ce la ne fonctionne pas, je dois mal l'utiliser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head><title>Test auto tab en javascript</title></head>
<body>
<SCRIPT LANGUAGE="JavaScript" SRC="./autotab.js"></SCRIPT>
  <table>
   <tr>
    <td> Date de naissance : &nbsp;
     <input type="text" name="jourNaiss" maxlength="2" size="1" value=""
     	style="width:25px;" class=""
     	onKeyDown="TabNext(this,'down',2)" onKeyUp="TabNext(this,'up',2,this.form.moisNaiss)" >
 
     <input type="text" name="moisNaiss" maxlength="2" size="1" value=""
     	style="width:25px;" class=""
     	onKeyDown="TabNext(this,'down',2)" onKeyUp="TabNext(this,'up',2,this.form.anneeNaiss)" >
 
     <input type="text" name="anneeNaiss" maxlength="4" size="2" value=""
     	style="width:40px;" class="">
 
    </td>
  </table>
 
</body>
</html>

et le js associé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var my_field_length=0;
function TabNext(obj,event,len,next_field) {
	if (event == "down") {
		my_field_length=obj.value.length;
		}
	else if (event == "up") {
		if (obj.value.length != my_field_length) {
			my_field_length=obj.value.length;
			if (my_field_length == len) {
				next_field.focus();
				}
			}
		}
	}

j'ai systématiquement des erreurs sur les évènements onKeyDown et onKeyUp .

Code:

1
2
3
4
5
ligne :10
car : 1
Erreur : objet requis
Code : 0
url : mon_fichier.html

comment résoudre ce problème ?
ps : c'est IE 5.5

04/04/2006, 11h43
SpaceFrog

c'est dans la :faq:
04/04/2006, 11h52
jcaruana

Citation:

Envoyé par SpaceFrog

c'est dans la :faq:

c'est ce que je pensais, mais je n'ai rien trouvé de précis au bout de 15 min de recherche, sauf http://javascript.developpez.com/faq...her#FocusObjet qui ne répond pas à la question pour un débutant comme moi en js (et qui compte le rester...)

j'ai finalement essayé http://www.rgagnon.com/jsdetails/js-0113.html et ca marche superbement et détecte en outre la taille sans à avoir à la passer en argument (ce qui est pratique)
[/url]