[Javascript et aspx] Placer le curseur sur textbox suivante

**maniolo** · 29/07/2007, 19h03

Petite modification dans le titre et je rajoute que ca fait longtemps que je n'était pas allez sur le forum et bien je dis trop fort le code en couleur!!

Bonjour à tous enfin ceux qui ne sont pas partis en vacances

Je ne savais pas si je devais exposer mon problème sur le forum C# ou javascript

mais cela me semble tout de même plus approprié sur ce forum. Bon cela paraitra
surement facile pour nombre d'entre vous, je ne maitrise pas encore le javascript et le fait de ne pouvoir débuger est très frustrant (je développe sous visual studio)

Voila, j'ai trois textbox de taille égale (40 caratères maximum)
j'aimerais d'une part que lorsque l'utilisateur appuie sur la touche Entrée on accède à la texbox suivante, voici ce que j'ai fait (à partir de méthode récupérées sur google ):
dans la page html (aspx) :

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
 
<BODY>
	<script language=javascript>
		function trap(event,NomTextBox)
		{ 
			if((event.which && event.which == 13)||(event.keyCode && event.keyCode == 13))
			{ 
				var tmpTextBox,nbTmpTextBox,tmp; 
				tmpTextBox = document.getElementById(NomTextBox).value; 
				nbTmpTextBox = tmpTextBox.charAt(3); 
				if (nbTmpTextBox.length > 0) 
				{ 
					tmp = 'box'+nbTmpTextBox; 
					documentgetElementById(tmp).focus(); 
				} 
			}
		}
		</script>
		<form id="Form1" method="post" runat="server">
			<asp:TextBox id="box1" runat="server" MaxLength="40"></asp:TextBox>
			<asp:TextBox id="box2" runat="server" MaxLength="40"></asp:TextBox>
			<asp:TextBox id="box3" runat="server" MaxLength="40"></asp:TextBox>
		</form>
	</BODY>

Et dans le code-behind (.acsx.cs)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
private void Page_Load(object sender, System.EventArgs e)
		{
 
			this.box1.Attributes.Add("onkeypress","return trap(event,box1.ClientID)");
			this.box2.Attributes.Add("onkeypress","return trap(event,box2.ClientID)");
			this.box3.Attributes.Add("onkeypress","return trap(event,box3.ClientID)");
 
			//page.RegisterClientScriptBlock("setFocus",script);
 
		}

Le résultat à l'heure actuelle est une valeur nulle NomTextBox dans le javascript

et d'autre part j'aimerais que lorsque l'on saisie jusqu'à 40 caractère dans une des textbox on est également redirigé vers la textbox suivante
Voila ce que j'ai récupéré mais je ne sais pas comment m'en servir :

Code :

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

1
2
3
4
5
6
7
8
public void setFocus(System.Web.UI.WebControls.TextBox champ)
		{
			//Champ est le WebControl sur lequel on veut mettre le //focus
			string s;
		s = "<script language= \"javascript\">document.getElementById('" + 
			box1.ClientID + "').focus()</script>"; 
			Page.RegisterStartupScript("focus", s);
		}

Voila en espérant que quelqu'un voudra bien m'aidé merci!

**SpaceFrog** · 29/07/2007, 19h37

dans la FAQ il y a un début de piste avec les tabInbdex.
http://javascript.developpez.com/faq...js#TexteSuivat

**JasonV6** · 29/07/2007, 19h46

Salut !

tu peux activer un "pseudo debugger"

sous IE dans Outils > Options Internet > Avancé. Ca te permet deja voir ou sont les erreurs...

Sinon sous Firefox tu as de bons addons :https://addons.mozilla.org/en-US/firefox/addon/216.

Dans la premiere partie de ton code, remplace deja

Code :

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

documentgetElementById(tmp).focus();

par

Code :

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

document.getElementById(tmp).focus();

Ensuite, pour plus de clarté, tu devrais selectionner tes textbox via

Code :

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

document.forms["Form1"].elements[NomTextBox]

.

Essaye de faire ces modifs deja et on verra ce que ca donne

**maniolo** · 30/07/2007, 13h51

Merci JasonV6 pour l'info l'addon mozilla et pour ma faute de programmation

Il y a t-il une différence peut-etre de performance
entre

Code :

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

1
2
3
4
5
 
document.forms["Form1"].elements[NomTextBox].name
//et
document.getElementById(NomTextBox).name;
//??

Merci SpaceFrog et désolé de ne pas avoir consulté la FAQ avant de posé ma deuxième question (c'était plus qu'un début de piste pour le coup!!)

J'ai résolu mon problème qui venait surtout du page load lors du passage d'attributs

Voici ce que j'ai fait :

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
 
 function trap(event,boxEnCours)
        {
            if((event.which && event.which == 13)||(event.keyCode && event.keyCode == 13))
            {
                var tmpTextBox,nbTmpTextBox,tmp;
                tmpTextBox = document.getElementById(boxEnCours).name;
                nbTmpTextBox = tmpTextBox.charAt(3);                
                if (nbTmpTextBox.length > 0)
                {                           
                    nbTmpTextBox++;
                    tmp = 'box'+ nbTmpTextBox++;
                    document.getElementById(tmp).focus();
                }
            }
        }
        function Autotab(boxSuivante,texte)
        {
                if (texte.length > 39) {
                document.getElementById(boxSuivante).focus();
            }
        }

et dans le code behind

this.box1.Attributes.Add("onkeypress","return trap(event,'box1');");
this.box2.Attributes.Add("onkeypress","return trap(event,'box2');");
this.box3.Attributes.Add("onkeypress","return trap(event,'box3');");
this.box4.Attributes.Add("onkeypress","return trap(event,'box4');");
this.box5.Attributes.Add("onkeypress","return trap(event,'box5');");
this.box6.Attributes.Add("onkeypress","return trap(event,'box6');");
this.box7.Attributes.Add("onkeypress","return trap(event,'box7');");
this.box8.Attributes.Add("onkeypress","return trap(event,'box8');");
this.box9.Attributes.Add("onkeypress","return trap(event,'box9');");

this.box1.Attributes.Add("onkeyup","return Autotab('box2',document.getElementById('box1').value);");
this.box2.Attributes.Add("onkeyup","return Autotab('box3',document.getElementById('box2').value);");
this.box3.Attributes.Add("onkeyup","return Autotab('box4',document.getElementById('box3').value);");
this.box4.Attributes.Add("onkeyup","return Autotab('box5',document.getElementById('box4').value);");
this.box5.Attributes.Add("onkeyup","return Autotab('box6',document.getElementById('box5').value);");
this.box6.Attributes.Add("onkeyup","return Autotab('box7',document.getElementById('box6').value);");
this.box7.Attributes.Add("onkeyup","return Autotab('box8',document.getElementById('box7').value);");
this.box8.Attributes.Add("onkeyup","return Autotab('box9',document.getElementById('box8').value);");
this.box9.Attributes.Add("onkeyup","return Autotab('box10',document.getElementById('box9').value);");

**JasonV6** · 30/07/2007, 23h58

Salut,

pour la différence de performance, je ne sais pas trop, mais mon intuition me dit qu'il est plus rapide pour le moteur de désigner une valeur dans un tableau (forms['forms1']) que d'utiliser une méthode qui va chercher à récupérer un élément dans la mémoire...

**JasonV6** · 31/07/2007, 08h54

Pour info, la dernière partie de ton code peut également s'écrire:

Code :

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

1
2
 
this.box9.onkeypress = function () { trap (event, 'box9'); }

ou bien

Code :

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

1
2
 
document.getElementById("box9").onkeypress = function () { trap (event, 'box9'); }

Par ailleurs, tu peux aussi sélectionner tes textinput avec

Code :

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

1
2
 
document.forms["Form1"].elements[i].name

ou 'i' est une variable représentant la position de 'élément dans le tableau. Dans ton cas, ce modèle est peut-être plus simple. Mais attention elements[i] contient tous les éléments du form...

[Javascript et aspx] Placer le curseur sur textbox suivante

JavaScript

Vue hybride

Discussions similaires

Partager

Partager