Event "onkeyup" - Synchronisation difficile

**Johnbob** · 07/06/2006, 11h40

Bonjour.

Alors c'est assez (voire très) compliqué mais je vais essayer de faire court.

J'ai des champs "input" de type "text" dans ma page. Je souhaite que l'utilisateur puisse taper le contenu de tous les champs au clavier sans discontinuer, i.e. sans appuyer sur TAB pour aller au input suivant et sans cliquer sur le input suivant. Jusque là rien de bien difficile, exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
	{
	var next=x.tabIndex
	if (next<document.getElementById("myForm").length)
		{
		document.getElementById("myForm").elements[next].focus()
		}
	}
}
</script>
</head>
 
<body>
<p>This script automatically jumps to the next field when the current field's maxlength has been reached:</p>
 
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
 
</html>

Le problème: considérons les trois champs textes ci dessous:
[champ1] [champ2] [champ3]
Lorsque le champ1 est rempli, mon script saute au champ3... cela se produit lorsque ces 2 conditions sont remplies:
- le champ2 est déjà rempli
- l'utilisateur a tapé le contenu du champ1 un peu vite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Passage automatique au champ suivant
function autoNextFocus(fromElementId, toElementId)
{
	window.event.cancelBubble = true;
	window.event.returnValue = false;
	if (window.event.repeat) window.event.repeat = false;
 
	// When the key pressed is tabulation ("9") or shift ("16")
	// the function must not be executed to allow going
	// forward (tabulation) and backward (shift+tabulation)
	if (window.event.keyCode!=9 && window.event.keyCode!=16 && window.event.keyCode!=37 && window.event.keyCode!=38 && window.event.keyCode!=39 && window.event.keyCode!=40)
	{
		fromElement = document.getElementById(fromElementId);
		toElement = document.getElementById(toElementId);
		currentValue = fromElement.value;
		if (currentValue.length==fromElement.maxLength) {
			toElement.focus();
		}		
	}
	return false;
}

J'ai cherché des heures et des heures sans succès

Les "cancelBubble", "returnValue" et "repeat" (en début de script) ne servent à rien dans mon cas, je ne vois plus vers quoi me tourner. J'aurais aimer faire "window.event = null;" en fin de script mais ça n'est pas possible.

Je n'arrive même pas à savoir pourquoi il saute un champ. J'ai remarqué que le focus passait au champ2 avant la détection du dernier onkeyup du champ1. Je ne comprend pas pourquoi, je suis perdu

Il y a aussi des appels AJAX à chaque sortie de champ (événement onbeforedeactivate) mais je ne pense pas qu'il y ait un rapport.

Des idées ? Des liens ? Une corde ?

(Je suis sous IE6 only)

**Johnbob** · 07/06/2006, 12h13

J'ai trouvé le pourquoi du comment.

Lorsque l'on tape vite au clavier, il peut arriver que 2 touches soient appuyées simultanément pendant quelques millisecondes.

D'où la succession d'événements suivante (pour un champ de longueur 2):

- onkeydown/onkeypress (touche n°1)
- champ.value est mis à jour
- onkeydown/onkeypress (touche n°2)
- champ.value est mis à jour et atteint sa longueur maximale
- onkeyup (touche n°1): le controle est lancé et détecte que le champ est rempli alors qu'il s'agit du onkeyup de la touche n°1, c'est le drame et il passe au champ suivant alors qu'il ne devrait pas.
- onkeyup (touche n°2): le focus est déjà dans le champ d'après, le contrôle est lancé malheureusement ce qui fait passer le focus au champ d'après, cqfd.

Est-ce que quelqu'un a compris ?

Reste plus qu'à trouver une solution

**systemofaxav** · 07/06/2006, 20h20

Dans la méthode OnKeyDown, tu testes si le champ est presque rempli (tout sauf un caractère).
Si c'est le cas, tu actives un marqueur (un booléen en global).
Et juste avant ce test (au tout début de ta méthode), tu fais un test sur ce marqueur, si il est activé, tu passes au champ suivant, et tu le désactives.

Je me demande s'il ne faut pas le faire quand il ne reste que deux places... bah ça ne demande qu'a être testé

**Sanvean** · 09/10/2009, 13h33

Bonjour,

Je viens de rencontrer exactement le même problème : le focus qui bouge d'un cran en trop.

Avec la solution suivante, je ne rencontre plus de problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
</head>
<body>
<script language="Javascript">
var cpt = 0;
function autotab(box, longueur, texte)
{
	cpt++;
	if (cpt == longueur) 
	{ 
		document.getElementById('TB'+box).select(); 
		cpt = 0;
	}
}
</script>
<form name="form">
<input type="text" name="TB1" id="TB1" tabindex="1" size=2 maxlength=2 onKeyUp="autotab(2, this.size, this.value)"> / 
<input type="text" name="TB2" id="TB2" tabindex="2" size=2 maxlength=2 onKeyUp="autotab(3, this.size, this.value)"> / 
<input type="text" name="TB3" id="TB3" tabindex="3" size=2 maxlength=2 onKeyUp="autotab(4, this.size, this.value)">
<br/>
<input type="text" name="TB4" id="TB4" tabindex="4" size=2 maxlength=2 onKeyUp="autotab(5, this.size, this.value)"> / 
<input type="text" name="TB5" id="TB5" tabindex="5" size=2 maxlength=2 onKeyUp="autotab(6, this.size, this.value)"> / 
<input type="text" name="TB6" id="TB6" tabindex="6" size=2 maxlength=2>
</form>
</body>
</html>

En espérant que ça puisse être utile.

Event "onkeyup" - Synchronisation difficile

JavaScript

Partager

Partager