Saisie rapide - Enchainement des inputs automatique

Version imprimable

13/10/2005, 17h02
Johnbob

Saisie rapide - Enchainement des inputs automatique
Bonjour à tous.

Voilà, dans un formulaire contenant un certain nombre d'input de type texte, je souhaite que lorsque l'utilisateur a saisi le bon nombre de caractères (correspondant à "maxlength"), le focus soit donné à l'input suivant. Ainsi, l'utilisateur tape en continue sur son clavier pour remplir tous les champs sans utiliser TAB ou la souris.

Code:

<input type="text" name="champ1" id="champ1" maxlength="6" onKeyUp="checkFilling(this);"/>
Code:

1 2 3 4 5 function checkFilling(field) { if (field.value.length==field.maxLength) { field.form.elements[field.QueMettreIci+1].focus(); } }
Quelle propriété de field (qui est un objet input) me renvoie son index dans le tableau des éléments du formulaire ? Il existe "sourceIndex" mais ça me donne l'index du input dans le tableau de tous les éléments HTML de la page...

D'autre part, il y a peut-être plus simple en écrivant un truc du style "field.form.next();" ?

:merci:
13/10/2005, 17h05
SpaceFrog

première remarque:

Citation:

if (field.value.length==nb) {
13/10/2005, 17h08
Johnbob

Héhé, je l'avais édité avant que tu postes :twisted:
Merci quand même.
13/10/2005, 17h37
Johnbob

Solution ici: http://www.w3schools.com/js/tryit.as...tryjs_autonext

Cette solution ne me convient pas car il est nécessaire d'affecter une valeur à tabindex pour tous les champs... Donc, la question du premier post tient toujours...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function checkFilling(field, next) {
	if (next) {
		if (field.value.length==field.maxLength) {
			field.form.elements[next].focus();
   		}
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<form name="formulaire" action="">
<input type="text" name="champ1" id="champ1" maxlength="6" onKeyUp="checkFilling(this, 'champ2');"/>
<input type="text" name="champ2" id="champ2" maxlength="6" onKeyUp="checkFilling(this);"/>
</form>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
function checkFilling(field) {
   if (field.value.length==field.maxLength) {
  var nextfield=this.id.split('p')
  nextfield=Number(nextField[1])+1
  nextfield="champ"+nextfield   
   document.getELementById(nextfield).focus();
   }
}

si tant est que tes champs aient une id incrémentée ...

Par contre avec mon code j'ai cette erreur 8O

Code:

1
2
3
Error: [Exception... "'Permission denied to get property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]"  nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)"  location: "JS frame :: file:///home/nico/Desktop/test_name.html :: checkFilling :: line 8"  data: no]
Source File: file:///home/nico/Desktop/test_name.html
Line: 8

:?:

13/10/2005, 17h47
SpaceFrog

ta solution Mr N correspond à ce j'ai mis dans la faq ... c'est à dire passer le champs next en paramètre

je propose de s'en passer si le nommage des id est rationnel ...
13/10/2005, 17h58
Mr N.

Tout à fait d'accord. Je préfere ta solution, sauf dans les cas où :
- il n'y a pas d'id
- les name sont des noms explicites (nom, prenoms, adresse, ...)

Ma méthode apporte cependant un couplage entre deux champs ce qui n'est pas le top du point de vue maintenanabilité...

Merci pour vos propositions ! Je continue à chercher car vos deux solutions nécessitent des élements dans le code HTML alors que je veux m'en affranchir (pas de "tabindex", pas d'id répondant à une logique, pas d'argument de fonction qui change...) Je suis sur qu'il y a un moyen... On a l'objet input et l'objet form qui sont dispos donc il doit y avoir une solution 100% javascript...
Citation:
Envoyé par Mr N.
Par contre avec mon code j'ai cette erreur 8O
Code:

1 2 3 Error: [Exception... "'Permission denied to get property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: file:///home/nico/Desktop/test_name.html :: checkFilling :: line 8" data: no] Source File: file:///home/nico/Desktop/test_name.html Line: 8
Je l'ai eu aussi. Ça m'a fait tellement peur que je n'en ai même pas cherché l'origine...

13/10/2005, 18h03
Mr N.

Citation:

Envoyé par Gaara

Merci pour vos propositions ! Je continue à chercher car vos deux solutions nécessitent des élements dans le code HTML alors que je veux m'en affranchir (pas de "tabindex", pas d'id répondant à une logique, pas d'argument de fonction qui change...) Je suis sur qu'il y a un moyen... On a l'objet input et l'objet form qui sont dispos donc il doit y avoir une solution 100% javascript...

Par quelle magie peux-tu connaitre le champ suivant un autre champ sans rien mettre dans le html ???

a ce moment là gaar il faut faire une boucle pour déterminer l'element en cours ...
Code:

1 2 3 4 5 6 function nextInput(currentinput){ for (i=0;i<document.forms[0].elements.length-1;i++){ if(currentinput==document.forms[0].elements[i]){ return i+1; } }
a toi de te méfier du dernier element

13/10/2005, 19h26
Johnbob

Citation:

Envoyé par Mr N.

Par quelle magie peux-tu connaitre le champ suivant un autre champ sans rien mettre dans le html ???

Avec une propriété de l'objet input. Il possêde les propriétés tabindex et sourceindex, donc je supposais qu'il avait une propriété du style formindex (c'est tout ce qu'il me faut) mais peut-être qu'il n'y en a pas tout simplement...

Ton dernier code est sympa SF ! Mais je privilégierais plutôt une des solutions précédentes pour pas perdre de fluidité.