onFocus + Ajouter attribut

**Spire_** · 10/10/2012, 15h10

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 :

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

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 :

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

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

Au plaisir de vous lire.

**andry.aime** · 10/10/2012, 19h45

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

**Spire_** · 11/10/2012, 10h09

Bonjour,

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

Code :

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

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 :

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

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

**andry.aime** · 11/10/2012, 10h15

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

**Spire_** · 11/10/2012, 10h28

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

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 :

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

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
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 ! (:

onFocus + Ajouter attribut

JavaScript

Discussions similaires

Partager

Partager