onFocus + Ajouter attribut

Version imprimable

Bonjour à vous !

Donc, j'ai un code ayant pour but que lorsque l'on clique sur un élément(image, texte, etc.), celui-ci se transforme en input de type texte.
Cependant, je souhaiterai que:

- Lorsque l'élément se transforme en input de type texte, que le curseur soit directement présent.
- Aussi, comment faire pour ajouter un input de type "submit" en plus de celui du type texte lorsque l'on clique sur l'élément ?

Voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 function transform(idname) { var cible = document.getElementById(idname); var newelem = document.createElement("input"); newelem.setAttribute('type', 'text'); newelem.setAttribute('name', idname); cible.parentNode.replaceChild(newelem,cible); }
Code:

1 2 <a href="#" onclick="transform('test')" id="test"><img src="http://www.swapaya.com/images/logo.png" /></a>
Au plaisir de vous lire.

10/10/2012, 19h45
andry.aime

Bonjour,

1- Internet explorer ne supporte pas le changement de l'attribut name.
2- Certains navigateurs ne supportent pas le changement de l'attribut type pour les éléments inputs.
La meilleur solution c'est de créer préalablement des éléments cachés que tu les affiches au moment voulu.
Pour créer un élément dynamiquement, regarde la faq.

A+.

Bonjour,

Merci pour ta réponse,
Voici ce que j'ai désormais:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function my_func(idname) { var divParent = document.getElementById(idname); var nouveauInput = document.createElement('input'); nouveauInput.name = 'nouveau'; nouveauInput.id = 'nouveauId'; nouveauInput.type = 'text'; divParent.parentNode.replaceChild(nouveauInput,divParent); } </script>
Code:

<a href="#" id="test" onclick="my_func('test')">test</a>

Cependant, je souhaiterais ajouter aussi un bouton submit lors du clique. Je ne vois pas comment m'y prendre.

Pourrais-tu m'éclairer ?

11/10/2012, 10h15
andry.aime

Tu le fais de la même façon que tu as créés l'input text sauf que le type sera un "submit".

Oui, j'ai bien essayé, mais ça ne fonctionne pas.
Et j'ai cette erreur lors du onclick:

Citation:

Uncaught TypeError: Cannot call method 'replaceChild' of null

Pourtant niveau priorité du code général (<body><script>)c'est bon, c'est dans la priorité de ce qu'il ce passe dans le onclick que je ne comprends 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
 
<html>
	<head>
		<title>Transform Elements</title>
	</head>
	<body>
	<script type="text/javascript">
	function my_func(idname)
	{
		var divParent = document.getElementById(idname);
 
		var nouveauInput = document.createElement('input');
                var nouveauValide = document.createElement('input');
 
		nouveauInput.name = 'nouveau';
		nouveauInput.id = 'nouveauId';
		nouveauInput.type = 'text';
 
                nouveauValide.name = 'validate';
	        nouveauValide.id = 'validateId';
		nouveauValide.type = 'submit';
 
		divParent.parentNode.replaceChild(nouveauInput,divParent);
                divParent.parentNode.replaceChild(nouveauValide,divParent);
	}
</script>
<a href="#" id="test" onclick="my_func('test')">test</a>
	</body>
</html>

Edit: Problème résolu, je n'avais pas ajouter de "div parent" qui englobe le tout:

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
38
39
40
<html>
	<head>
		<title>Transform Elements</title>
	</head>
	<body>
		<script type="text/javascript">
			function my_func(idname)
			{
				// recherche du noeud parent
				var divParent = document.getElementById(idname);
 
				// création des nouveaux noeuds
				var nouveauDiv = document.createElement('div');
				var nouveauInput = document.createElement('input');
				var nouveauValide = document.createElement('input');
 
				/* paramétrage des nouveaux noeuds
				nouveauLabel.appendChild(document.createTextNode("Mon nouveau label :"));
				nouveauLabel.htmlFor = 'nouveauId';*/
 
				// paramétrage des nouveaux noeuds
				nouveauInput.name = 'nouveau';
				nouveauInput.id = 'nouveauId';
				nouveauInput.type = 'text';
 
				nouveauValide.name = 'validate';
				nouveauValide.id = 'validateId';
				nouveauValide.type = 'submit';
				nouveauValide.value = 'Valider';
 
				// raccord des noeuds
				divParent.parentNode.replaceChild(nouveauDiv,divParent);
				nouveauDiv.parentNode.appendChild(nouveauInput);
				nouveauDiv.parentNode.appendChild(nouveauValide);
			}
		</script>
 
		<a href="#" id="test" onclick="my_func('test')">test</a>
	</body>
</html>

Merci à toi et bonne journée ! (: