Saisie rapide - Enchainement des inputs automatique

**Johnbob** · 13/10/2005, 17h02

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 :

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

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

Code :

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

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();" ?

**SpaceFrog** · 13/10/2005, 17h05

première remarque:

if (field.value.length==nb) {

**Johnbob** · 13/10/2005, 17h08

Héhé, je l'avais édité avant que tu postes

Merci quand même.

**Johnbob** · 13/10/2005, 17h37

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...

**Mr N.** · 13/10/2005, 17h44

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
<!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>

**SpaceFrog** · 13/10/2005, 17h44

Code :

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

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 ...

**Mr N.** · 13/10/2005, 17h46

Par contre avec mon code j'ai cette erreur

Code :

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

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

:

**SpaceFrog** · 13/10/2005, 17h47

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 ...

**Mr N.** · 13/10/2005, 17h58

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é...

**Johnbob** · 13/10/2005, 18h01

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...

Envoyé par Mr N.

Par contre avec mon code j'ai cette erreur

Code :

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

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...

**Mr N.** · 13/10/2005, 18h03

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 ???

**SpaceFrog** · 13/10/2005, 18h06

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

Code :

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

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

**Johnbob** · 13/10/2005, 19h26

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é.

Saisie rapide - Enchainement des inputs automatique

JavaScript

Discussions similaires

Partager

Partager