[FAQ][correction] Comment passer automatiquement au champ suivant

**Auteur** · 11/12/2006, 12h38

Comment passer automatiquement au champ suivant lorsque la taille maximale du champs en cours est atteinte ?

Auteur : Spacefrog
Lien : http://javascript.developpez.com/faq...js#TexteSuivat

Remarque :
Une erreur c'est glissée dans le script proposé. En effet, les éléments sont ciblés par document.getElementById(). Or, dans le code HTML, ce n'est pas l'attribut id qui est utilisé mais name.
D'où cette correction (remplacer name par id) :

Code html :

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AutoTab Page</title>
<script language="JavaScript" type="text/JavaScript">
function Autotab(box, longueur, texte)
{
    if (texte.length > longueur-1) {
        document.getElementById('TB'+box).focus();
    }
}
</script>
</head>
<body>
<input type="text" size="5" maxlength="5" length="20" id="TB1"
&nbsp;&nbsp;&nbsp;&nbsp;tabindex="1" onkeyup="Autotab(2, this.size, this.value)"/>
<input type="text" size="2" maxlength="2" id="TB2" tabindex="3"
&nbsp;&nbsp;&nbsp;&nbsp;onkeyup="Autotab(3, this.size, this.value); "/>
<input type="text" maxlength="5" id="TB3" tabindex="2" />
</body>
 
</html>

**FremyCompany** · 11/12/2006, 18h28

En effet, tu as raison.

A quoi sert tabindex si on ne l'utilise pas dans le code ?

Ne faudrait-il pas tester avec this.form.elements quel est le prochain élément dans la liste des tabindex ?

**Auteur** · 11/12/2006, 18h50

Envoyé par FremyCompany

A quoi sert tabindex si on ne l'utilise pas dans le code ?

sans doute lorsque tu fais les tabulations en utilisant la touche tab. Tabindex donne l'ordre dans lequel les éléments ont le focus.

Envoyé par FremyCompany

Ne faudrait-il pas tester avec this.form.elements quel est le prochain élément dans la liste des tabindex ?

euh, c'est une colle ! Peux-tu donner un exemple ? Dans ce cas précis tu remarqueras que les input ne sont pas encadrés de la balise form.

**FremyCompany** · 11/12/2006, 19h05

Oui, alors ca ne marche que pour les inputs de la même form, mais généralement, si ils nécéssitent un autoTab, c'est le cas

Ebauche :
index.html

Code HTML :

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
29
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AutoTab Page</title>
<script language="JavaScript" type="text/JavaScript" src="autoTab.js"></script>
</head>
<body>
<form>
Clé 1 :
<input type="text" size="5" maxlength="5" length="20" tabindex="1" 
             onkeyup="Autotab(this)" onchange="this.onkeyup()" />
<input type="text" size="2" maxlength="2" lenght="2" tabindex="2"
             onkeyup="Autotab(this);" onchange="this.onkeyup()" />
<input type="text" size="5" maxlength="5" length="5" tabindex="3"
             onkeyup="Autotab(this);" onchange="this.onkeyup()" />
 
Clé 2 : 
<input type="text" size="5" maxlength="5" length="20" tabindex="5" 
             onkeyup="Autotab(this)" />
<input type="text" size="2" maxlength="2" lenght="2" tabindex="6"
             onkeyup="Autotab(this);" />
<input type="text" size="5" maxlength="5" length="5" tabindex="7"
             onkeyup="Autotab(this);" />
 
</form>
</body>
 
</html>

autoTab.js :

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
function Autotab(input)
{
    // Longueur du texte = longueur préconisée
    if (input.value.length = parseInt(input.size)) {
        // tabActuel :
        var tab = parseInt(input.getAttribute("tabindex"));
        // avance d'un tab :
        tab=tab+1;
        // Récupére tous les inputs
        var all = document.getElementsByTagName("input");
        for (var i=0; i!=all.length-1; i++) {
            if (parseInt(all[i].getAttribute("tabindex")) == tab) {
                all[i].focus(); all[i].select(); return true;
            }
        }
        window.focus(); return true;
    }
}

**Auteur** · 11/12/2006, 19h29

Visiblement tu peux te passer du getAttribute() (au moins pour Firefox et IE, à voir Opéra (?) ).
J'ai modifié les noms des variables pour éviter des confusions avec des mots- clefs

Code javascript :

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
 
function Autotab(obj)
{
    // Longueur du texte = longueur préconisée
    if (obj.value.length == parseInt(obj.size))
    {
        // tabActuel :
        var tab = parseInt(obj.tabIndex);
 
        // avance d'un tab :
        tab=tab+1;
 
        // Récupére tous les inputs
        var allObj = document.getElementsByTagName("input");
        for (var i=0; i<all.length; i++)
        {
            if (parseInt(allObj[i].tabIndex) == tab)
            {
                allObj[i].focus(); 
                allObj[i].select();
                return true;
            }
        }
        window.focus();
        return true;
    }
}

Peux m'expliquer le select() ainsi que le window.focus() ?

**FremyCompany** · 11/12/2006, 20h32

En effet, le choix de "all" n'était pas judicieux...
J'ai réalisé le code trop promptement.

Explication complémentaire :
le select() est à garder si tu veux que ton champs se selectionne (afin de pourvoir réécrir son contenu sans devoir effacer) lors d'un chagement de TAB...

le window.focus a pour but de faire perde le focus ou champs qui était actif et dont le nombre complet de caractère a été tapé. Encore une fois, c'est une préférence personnelle, et ca pourrait faire l'objet d'un paramètre (optionel)

**FremyCompany** · 11/12/2006, 20h48

Ce code-ci marche très bien sur tous les navigateurs, mais il reste un pb : quand un champs déjà rempli gagne le focus, on passe direct au champs suivant... faut modifier ca...

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
function Autotab(input, undoSelect, undoBlur)
{
    // Longueur du texte = longueur préconisée
    if (input.value.length == parseInt(input.size)) {
        // tabActuel :
        var tab = parseInt(input.getAttribute("tabindex"));
        // avance d'un tab :
        tab=tab+1;
        // Récupére tous les inputs
        var allFields = document.getElementsByTagName("input");
        for (var i=0; i!=allFields.length; i++) {
            if (parseInt(allFields[i].getAttribute("tabindex")) == tab) {
                allFields[i].focus();
                if (!undoSelect) { allFields[i].select(); }
                return true;
            }
        }
        if (!undoBlur) { input.blur(); window.focus(); }
        return true;
    }
}

**SpaceFrog** · 12/12/2006, 08h44

Et voici le fautif ... :oups:

Oui le tabIndex sert à pouvoir utilser la touche tab si le champs n'atteind pas sa limite ...

Parcontre il y a déja eu un autre thread sur le sujet sur un autre travers de ce script, en effet si la zone contient déja le nombre maximal de caractère lorsqu'il reçoit le focus le script envoir directement à la zone suivante ...
J'avais dasn ce thread proposé une correction de ce problème au moyen d'une variable tampon qui recevait le contenu de l'input si celui-ci n'était pas vide ...

**FremyCompany** · 12/12/2006, 14h41

Envoyé par FremyCompany

mais il reste un pb : quand un champs déjà rempli gagne le focus, on passe direct au champs suivant... faut modifier ca...

Envoyé par SpaceFrog

J'avais dans ce thread proposé une correction de ce problème au moyen d'une variable tampon qui recevait le contenu de l'input si celui-ci n'était pas vide ...

En effet, c'est une bonne idée, mais ca demande plus de code HTML, non ?
Faut voir si on sait pas faire autrement... tester event.wich/keyCode ? Qu'en penses-tu ?



**SpaceFrog** · 14/12/2006, 14h40

Si tu l'avais pour le bouton résolu ... dasn nos signatures

**FremyCompany** · 14/12/2006, 18h18

Envoyé par SpaceFrog

Si tu l'avais pour le bouton résolu ... dasn nos signatures

Figure toi que j'y ai pensé... mais le problème c'est que l'adresse url doit changer en fonction de la page, conclusion, c'est pas possible... faudrait le faire au cas par cas... ou autoriser les liens qui executent du javascript ou des arguments ($p = post en cours, $m = message de la signature, ...) ce qui est loin d'être le cas, et surtout loin d'être facile à réaliser pour les developpeurs du forum

Au fait, voici le code final que j'utilise et qui marche très bien sur FF comme sur IE

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
function Autotab(input, e, undoSelect, undoBlur)
{
    // Longueur du texte = longueur préconisée
    if (input.value.length == parseInt(input.getAttribute("size")) && input.oldSize != input.value.length) {
        // tabActuel :
        var tab = parseInt(input.getAttribute("tabindex"));
        // avance d'un tab :
        tab=tab+1;
        // Récupére tous les inputs
        var allFields = document.getElementsByTagName("input");
        for (var i=0; i!=allFields.length; i++) {
            if (parseInt(allFields[i].getAttribute("tabindex")) == tab) {
                allFields[i].focus();
                if (!undoSelect) { allFields[i].select(); }
                input.oldSize=input.value.length;
                return true;
            }
        }
        if (!undoBlur) { input.blur(); window.focus(); }
    }
    // éviter le changement de focus non-désiré
    input.oldSize=input.value.length;
    return true;
}

avec comme HTML

Code HTML :

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
29
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AutoTab Page</title>
<script language="JavaScript" type="text/JavaScript" src="autoTab.js"></script>
</head>
<body>
<form>
Clé 1 :<br/>
<input type="text" size="5" maxlength="5" length="20" tabindex="1" 
             onkeyup="Autotab(this, event)" />
<input type="text" size="2" maxlength="2" lenght="2" tabindex="2"
             onkeyup="Autotab(this, event)" />
<input type="text" size="5" maxlength="5" length="5" tabindex="3"
             onkeyup="Autotab(this, event)" />
<br/><br/>
Clé 2 (undoSelect, undoBlur) : <br/>
<input type="text" size="5" maxlength="5" length="20" tabindex="5" 
             onkeyup="Autotab(this, event, true, true)" />
<input type="text" size="2" maxlength="2" lenght="2" tabindex="6"
             onkeyup="Autotab(this, event, true, true)" />
<input type="text" size="5" maxlength="5" length="5" tabindex="7"
             onkeyup="Autotab(this, event, true, true)" />
 
</form>
</body>
 
</html>

[FAQ][correction] Comment passer automatiquement au champ suivant

Contribuez

Discussions similaires

Partager

Partager