perte de focus lors de la creation d'input text avec innerhtml

**arnobidul** · 14/06/2006, 14h02

Bonjour,

je crée d'abord un champ de type text, lorsqu'on clique sur cet element un autre champ de type text se crée, mais je perds le focus de cet element malgré le "this.focus()" donc pas moyen de saisir quoique ce soit

Merci.

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
 
<script>
var toto = 1;
 
function addinput(){			
	document.getElementById('prodplus').innerHTML += "<table><tr><td><input type=\"text\" size=\"6\" onclick=\"addinput();this.focus();\" name=\"\'imp\' + toto\"></td></tr></table>";
	toto++;
}
</script>
 
 
<tr id="lotprod">	
	<td>Ref Produits: </td>
	<td>
		<input type="text" size="6" onclick="addinput();focus();" name="imp0"> 
	</td>
</tr>
 
<tr>
	<td></td>
	<td id="prodplus">
	</td>
<tr>

**arnobidul** · 14/06/2006, 14h03

Bonjour,

je crée d'abord un champ de type text, lorsqu'on clique sur cet element un autre champ de type text se crée, mais je perds le focus de cet element malgré le "this.focus()" donc pas moyen de saisir quoique ce soit

Merci.

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
 
<script>
var toto = 1;
 
function addinput(){			
	document.getElementById('prodplus').innerHTML += 
"<table><tr><td><input type=\"text\" size=\"6\" 
onclick=\"addinput();this.focus();\" name=\"\'imp\' + toto\"></td></tr></table>";
	toto++;
}
</script>
 
 
<tr id="lotprod">	
	<td>Ref Produits: </td>
	<td>
		<input type="text" size="6" onclick="addinput();focus();" name="imp0"> 
	</td>
</tr>
 
<tr>
	<td></td>
	<td id="prodplus">
	</td>
<tr>

**SpaceFrog** · 14/06/2006, 14h48

??? heu le this.focus tu le mets dans le onclick ...

tout objet prend naturellement le focus quand on clicke dessus ...

et tu veux qu'il le prenne quand le focus ...

**arnobidul** · 14/06/2006, 14h52

justement quand le bouton se crée il perd automatiquement le focus, ce que je ne comprends pas, j'ai mis le this.focus pour tester mais rien ne change

**SpaceFrog** · 14/06/2006, 14h55

Code :

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

<input type="text" size="6" onclick="addinput(this);" name="imp0">

Code :

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

1
2
3
4
5
6
7
8
9
 
function addinput(origine){			
	document.getElementById('prodplus').innerHTML += 
"<table><tr><td><input type=\"text\" size=\"6\" 
onclick=\"addinput();this.focus();\" name=\"\'imp\' + toto\"></td></tr></table>";
	toto++;
origine.focus()
}
</script>

**arnobidul** · 14/06/2006, 15h04

merci de ton interet mais je ne garde pas le focus dans le champ cliqué.

si tu colle ca dans un .html, on ne peut rien saisir dans les champs suivant celui d'origine

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
 
<html>
<body>
<script>
var toto = 1;
 
function addinput(origine){			
	document.getElementById('prodplus').innerHTML += "<table><tr><td><input type=\"text\" size=\"6\" onclick=\"addinput(this);this.focus();\"></td></tr></table>";
	toto++;
origine.focus()
}
</script>
 
<table>
<tr id="lotprod">	
	<td>Ref Produits: </td>
	<td>
<input type="text" size="6" onclick="addinput(this);" name="imp0"> 
</td>
</tr>
 
<tr>
	<td></td>
	<td id="prodplus">
	</td>
<tr>
</table>
</body>
</html>

**SpaceFrog** · 14/06/2006, 15h07

desolé alors j'ai rien compris à ce que tu voulais faire ...

réexeplique le principe de base ..., quel est le but de la manoeuvre et le deroulement supposé des opérations ...

en gros tu clicques sur quoi quand et ça doit faire quoi ...
"cet element garde le focus " heu oui lequel ???

**arnobidul** · 14/06/2006, 15h10

je crée un premier champ, lorsque tu le remplis, un deuxieme champ apparait pour mettre le produit suivant et ainsi de suite, le probleme c'est que les champs ont l'air en read only, que j'ai deja essayé de passer a false sans succes, donc pas moyen de saisir les produits suivants...

**SpaceFrog** · 14/06/2006, 15h16

ha ....
oulà ...
innerHTML + table .... bref on reviendra là dessus ...

quand on le remplit ??? la focntion me semble lancée sur le onclick pas sur le remplissage ...

alors precise moi
le nouveau champs il doit se créer quand exactement et quand doit il prendre le focus ...

**arnobidul** · 14/06/2006, 15h21

ben le probleme c'est pas vraiment le moment ou il apparait mais c'est plutot le fait que je ne puisse rien saisir dans les champs créés...

**SpaceFrog** · 14/06/2006, 15h36

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
<script type='text/javascript'>
function addInput(){
var NewInput=document.createElement('input')
NewInput.type='text'
document.body.appendChild(NewInput)
document.body.appendChild(document.createElement('br'))
}
</script>
 
</head>
 
<body>
<input type='button' onclick="addInput()" value='ajouter' /><br/>
</body>
</html>

**arnobidul** · 14/06/2006, 15h47

dac j'étais justement en train de m'interesser a DOM...merci je vé essayer de transformation a la convenance de Monsieur le Chef

**arnobidul** · 14/06/2006, 16h08

j'ai tenté ceci qui ne fonctionne pas :

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
33
 
 
<html>
<head>
<script type='text/javascript'>
 
var i = 1;
 
function addInput(){
 
	var NewInput=document.createElement('input')
	NewInput.type='text'
 
	NewInput.setAttribute("name","imp"+i);
	NewInput.setAttribute("onClick","javascript:addInput();");
 
	//document.body.appendChild(NewInput)
	//document.body.appendChild(document.createElement('br'))
	document.getElementById('toto').appendChild(NewInput)
	document.getElementById('toto').appendChild(document.createElement('br'))
}
</script>
 
</head>
 
<body>
<div id="toto">
 
</div>
<input type='text' name="imp0" ><br>
 
</body>
</html>

**arnobidul** · 14/06/2006, 16h10

j'ai oublié le addInput de depart..pardon...tout marche merci!

**SpaceFrog** · 14/06/2006, 16h12

Code :

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

1
2
3
 
NewInput.name="imp"+i;
NewInput.onClick=function(){addInput()}

et tu as du oublier aussi d'incrémentrer le i ...

**arnobidul** · 14/06/2006, 16h17

yes merci, sinon petite question dom, doit on fermer les balises?

pour : document.getElementById('prodplus').appendChild(document.createElement('table'))

doit on ecrire :
document.getElementById('prodplus').appendChild(document.createElement('/table'))

**SpaceFrog** · 14/06/2006, 16h18

tu auras peut être un souci avec le i genre ils auront tous le même name ...
si c'est le cas j'ai une soluce ... dis moi ...

**SpaceFrog** · 14/06/2006, 16h23

non la creation crée automatiquement la balsie de fermetur ...
mais je te vois venir et je penses que tu aurais plus vite fait des faire un cloneNode ...
avoir en fait la balise table complète avec l'input et la cloner ...

file moi le html fini d'un table et je te fais un exemple ...

**arnobidul** · 14/06/2006, 16h26

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
33
34
35
36
37
 
<script>
 
var i = 1;
 
function addInput(){			
	var NewInput=document.createElement('input')
	NewInput.type='text'
 
	NewInput.setAttribute("size","6");
	NewInput.setAttribute("name","imp"+i);
	NewInput.setAttribute("onfocus","javascript:addInput();");
 
		document.getElementById('prodplus').appendChild(document.createElement('table'))
document.getElementById('prodplus').appendChild(document.createElement('tr'))
document.getElementById('prodplus').appendChild(document.createElement('td'))
document.getElementById('prodplus').appendChild(NewInput)
//document.getElementById('prodplus').appendChild(document.createElement('/td'))
//document.getElementById('prodplus').appendChild(document.createElement('/tr'))
//document.getElementById('prodplus').appendChild(document.createElement('/table'))		
		i++;
}
</script>
 
<tr id="lotprod" style="visibility:hidden">	
 
<td>Ref Produits: </td>
<td>
				<input type="text" size="6" onfocus="addInput()" name="imp0"> 
</td>
</tr>
 
<tr>
<td></td>
<td id="prodplus">
</td>
<tr>