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

Auteur · 11/12/2006, 12h38

Citation:

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

Citation:

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.

Citation:

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

Citation:

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

Citation:

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

Citation:

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>

11/12/2006, 18h28	#2
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	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 ? __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

11/12/2006, 20h32	#6
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	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) __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

12/12/2006, 08h44	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 081 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 081 Points : 45 214 Points : 45 214	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 ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

14/12/2006, 14h40	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 081 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 081 Points : 45 214 Points : 45 214	Si tu l'avais pour le bouton résolu ... dasn nos signatures __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email