Donner le focus depuis le body

**Tellounet** · 18/06/2008, 10h35

Bonjour,

J'affiche un formulaire de saisie dans une page ASP, et j'aimerais que le premier champ de mon formulaire soit focusé à l'ouverture de la page.

Sur le tuto je trouve ça:

Seulement, je me vois mal demander à l'utilisateur de cliquer sur un bouton pour que le champ prenne le focus.
J'ai donc tenté ceci:

<head><script type='text/javascript'>
function donneFocus(id)
{
var element = document.getElementById(id);
element.focus();
}
</script>
</head>
<body onload="donneFocus('champ1');">
...
<input id="champ1"...>
...
</body>

Seulement, aucun résultat.

Pourriez-vous me dépanner s'il vous plaît?
Ca n'a l'air de rien mais je sèche

**Bovino** · 18/06/2008, 10h51

A part le fait que donner le nom "element" à une variable est plutôt maladroit, je n'ai pas l'impression que l'erreur vienne du code que tu nous montres...
A tout hasard, le type de ton input, c'est quoi ?

**laurentibus** · 18/06/2008, 11h08

il faut que tu fasse le onload="donneFocus('champ1');" a la fin de ton document html et non au début ....
car sinon il ne connait pas encore ton element champ1

voila

**Tellounet** · 18/06/2008, 11h13

pour le nom de la variable, je n'ai fait que recopier l'exemple, qui a priori ne gêne pas.
Mon input est un bête "text"

Bon oui, l'erreur vient sûrement du fait que l'id n'est pas encore renseigné.
Je vais chercher où le mettre. dans la balise de l'input c'est envisageable? juste après avoir déclaré d'id justement.

Je teste et je dis

**laurentibus** · 18/06/2008, 11h18

Envoyé par Tellounet

Je vais chercher où le mettre. dans la balise de l'input c'est envisageable? juste après avoir déclaré d'id justement.

oui mais c'est pas très lisible après
mets le a la fin de ton doc dans les balises <script .....>
comme tu fais au début mais a la fin

**Tellounet** · 18/06/2008, 11h24

Ben comme en plus ça ne marche pas, je vais faire ça.

Ah oui on peut mettre du code après le </html>?
Hum... intéressant...

edit:
Bingo, ça marche et de surcroît ça me perce le fondement!

Merci beaucoup, tu viens de m'ouvrir une belle voie pour le futur (rien à voir avec la phrase précédente) en résolvant un problème mineur.
JE me souviendrai de ça.

Et merci encore!

ju.

**SpaceFrog** · 18/06/2008, 11h35

heu mettre l'instruction dans le onload est correct !
l'instruction n'étant lancées qu'une fois tous les elements de la page instanciés....

Ton erreur était ailleurs...
tu as trouvé un pansement, mais ce genre de pratique est à déconseiller ...
C'est bien dans le onload que tu dois donner le focus à l'element

**Tellounet** · 18/06/2008, 11h44

...

en effet, le code copié-collé dans mon body marche à présent.

Je devais avoir une petite erreur de frappe quelque part, c'est malin...

Enfin malgré tout ça n'est pas inintéressant de voir ces choses là, et de savoir ce qui est exécuté, dans quel ordre, ce qu'il est possible de faire.

Content de voir que ma première intention était la bonne, et désolé du dérangement.
Merci

**SpaceFrog** · 18/06/2008, 11h55

Oui cela t'auras permi de comprendre la notion d'instanciation des objets en javascript ...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<html>
<head>
</head>
<body>
<script type='text/javascript'>
alert(document.getElementById('one').innerHTML)
</script>
<div id='one'>coucou</div>
</body>

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<html>
<head>
</head>
<body>
<div id='one'>coucou</div>
<script type='text/javascript'>
alert(document.getElementById('one').innerHTML)
</script>
</body>

**laurentibus** · 18/06/2008, 12h08

Envoyé par SpaceFrog

heu mettre l'instruction dans le onload est correct !
l'instruction n'étant lancées qu'une fois tous les elements de la page instanciés....

tu es sur car moi j'ai l impression que non (sauf erreur de ma part

) :

Avec onload en debut de document :
marche pas car document.getElementById('newchemein') has no properties

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
25
26
27
28
29
30
31
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
<script type="text/javascript">
window.onload=donnerFocus();
function donnerFocus(){
document.getElementById('newChemin').focus();
}
</script>
</head>
<body>
 
<form method="post" >
 
 
	<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
	<textarea id="elm1" name="elm1" rows="30" cols="99" style="width: 100%">
	</textarea>
	<br />
	<b><u>Importer procédure : </u></b>ouvrir la procédure dans un navigateur, ctrl + a et ctrl + c. Cliquez ci dessus dans la zone de texte puis ctrl + v.<br/>  
	<br/>
	<b><u>Créer une procédure :</u></b><br/> Entrez le chemin 
	<input TYPE="text" id="newChemin" SIZE="40"/>
	<br/><br/>
	<b><u>Modifier une procédure :</u></b><br/>
	Procédure à modifier : &nbsp;&nbsp;</b><input TYPE="file" id="chemin" NAME="fichier" SIZE="40"/>
</form>
</body>
</html>

Avec onload en fin de doc :
la j ai bien le focus

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
25
26
27
28
29
30
31
32
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
 
</head>
<body>
 
<form method="post" >
 
 
	<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
	<textarea id="elm1" name="elm1" rows="30" cols="99" style="width: 100%">
	</textarea>
	<br />
	<b><u>Importer procédure : </u></b>ouvrir la procédure dans un navigateur, ctrl + a et ctrl + c. Cliquez ci dessus dans la zone de texte puis ctrl + v.<br/>  
	<br/>
	<b><u>Créer une procédure :</u></b><br/> Entrez le chemin 
	<input TYPE="text" id="newChemin" SIZE="40"/>
	<br/><br/>
	<b><u>Modifier une procédure :</u></b><br/>
	Procédure à modifier : &nbsp;&nbsp;</b><input TYPE="file" id="chemin" NAME="fichier" SIZE="40"/>
</form>
<script type="text/javascript">
window.onload=donnerFocus();
function donnerFocus(){
document.getElementById('newChemin').focus();
}
</script>
</body>
</html>

j ai juste déplacer mon code

je suis quasi sur que j avais deja eu des pb similaires et j avais du mettre mon onload a la fin de la page

**Bovino** · 18/06/2008, 12h17

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
25
26
27
28
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
<script type="text/javascript">
function donnerFocus(){
document.getElementById('newChemin').focus();
}
</script>
</head>
<body onload="donnerFocus()">
 
<form method="post" >
 
 
	<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
	<textarea id="elm1" name="elm1" rows="30" cols="99" style="width: 100%">
	</textarea>
	<br />
	<b><u>Importer procédure : </u></b>ouvrir la procédure dans un navigateur, ctrl + a et ctrl + c. Cliquez ci dessus dans la zone de texte puis ctrl + v.<br/>  
	<br/>
	<b><u>Créer une procédure :</u></b><br/> Entrez le chemin 
	<input TYPE="text" id="newChemin" SIZE="40"/>
	<br/><br/>
	<b><u>Modifier une procédure :</u></b><br/>
	Procédure à modifier : &nbsp;&nbsp;</b><input TYPE="file" id="chemin" NAME="fichier" SIZE="40"/>
</form>
</body>
</html>

fonctionne très bien en tout cas...
mais je ne saurais pas expliquer pourquoi le window.onload dans le script fonctionne différemment.

**laurentibus** · 18/06/2008, 13h28

effectivement ca marche

spaceFrog tu as une explication ???

**SpaceFrog** · 18/06/2008, 13h33

une explication ? non...
c'est pour cela que je ne le sers JAMAIS du window.onload

**laurentibus** · 18/06/2008, 13h42

ok
j'espere qu'on est pas victime de ta 1ere règle

Envoyé par SpaceFrog

1) Ne communiquez jamais à quelqu'un tout votre savoir...

bon ben en tout cas on sais ce qui marche et ce qui ne marche pas

enfin si un jour un big boss sait le pourquoi du comment ...j'espère qu'il le fera savoir ...

++

**Tellounet** · 18/06/2008, 14h16

Ah ben j'aurai au moins lancé un débat.

Comme disait quelqu'un, l'"informatique est une science exacte aux résultats aléatoires"... enfin c'est ce qu'on dit quand on n'a pas un code niquel, ou qu'il ne colle pas à l'environnement où on le place

Donner le focus depuis le body

JavaScript

Discussions similaires

Partager

Partager