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

Version imprimable

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:

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>

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:

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>

14/06/2006, 14h48
SpaceFrog

??? 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 ...
14/06/2006, 14h52
arnobidul

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

Code:

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

Code:

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>

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:

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>

14/06/2006, 15h07
SpaceFrog

8O 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 ???
14/06/2006, 15h10
arnobidul

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...
14/06/2006, 15h16
SpaceFrog

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 ...
14/06/2006, 15h21
arnobidul

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

Code:

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>

14/06/2006, 15h47
arnobidul

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

j'ai tenté ceci qui ne fonctionne pas :

Code:

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>

14/06/2006, 16h10
arnobidul

j'ai oublié le addInput de depart..pardon...tout marche merci!
14/06/2006, 16h12
SpaceFrog
Code:

1 2 3 NewInput.name="imp"+i; NewInput.onClick=function(){addInput()}
et tu as du oublier aussi d'incrémentrer le i ...
14/06/2006, 16h17
arnobidul

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'))
14/06/2006, 16h18
SpaceFrog

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 ...
14/06/2006, 16h23
SpaceFrog

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

Code:

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>

14/06/2006, 16h27
SpaceFrog

Bon alors je recommence ...

donne moi plutot le code html d'un tableau fini ;)

quelle est la partie à reproduire ?
14/06/2006, 16h29
arnobidul

je comprends pas héhé explique juste avec des mots j'essayeré de desenfouir ma capacité d'abstraction...

le principe:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type='text/javascript'>
function addInput(){
var NewInput=document.getElementById('blanktable').cloneNode(true)
NewInput.style.display='';
document.body.appendChild(NewInput)
 
}
</script>
 
</head>
 
<body>
 
<table id='blanktable' style='display:none'>
<tr>
	<td><input type='text' />
	</td>
</tr>
</table>
 
<input type='button' onclick="addInput()" value='ajouter' /><br/>
</body>

14/06/2006, 16h42
arnobidul

pas mal ce DOM dis donc! se passer de innerHtlm quel plaisir...
14/06/2006, 16h43
SpaceFrog

surtout très pratique pour cloner une structure ...
14/06/2006, 17h05
arnobidul

cela dit, pour recuperer le nombre de champs créés via php je vois pas trop...
14/06/2006, 17h20
SpaceFrog

je pige pas la question ... tu veux faire quoi àprès ?
14/06/2006, 17h25
arnobidul

tous les champs ont un name du type "imp"+i balancés en POST mais il faut que je sache le nombre de champs qui ont été créés pour pouvoir recuperer leur valeur via php...

le principe:

Code:

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
<script type='text/javascript'>
function addInput(){
var NewInput=document.getElementById('blanktable').cloneNode(true)
NewInput.style.display='';
document.body.appendChild(NewInput)
 
}
 
function foo(){
var allTab= document.getElementsByTagName('*');
var AddedTrs= new Array();
 
for(i=0; i<allTab.length;i++){
	if (allTab[i].id.substr(0,3)=='imp'){AddedTrs.push(allTab[i])}
		}
		alert(AddedTrs.length)
		}
</script>
 
</head>
 
<body >
 
<table id='blanktable' style='display:block'>
<tbody id='here'><tr id='imp'>
	<td><input type='text' />
	</td>
</tr>
</tbody>
</table>

l'exemple est mauvais car j'ai cloné les id , faudrait les modifier ... mais je oense que ça tu saura faire ... j'ai pas le temps là ...