remplacer un lien par un champ text ?

**bobbybrown** · 23/10/2008, 22h18

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
12 var num;
13 var newdiv;
14 var txtsaisi="";
15
16 function chargement() {
17 try {
18 newdiv = document.getElementById("divtxt");
19 newdiv.innerHTML = "&nbsp;<textarea id='textbox' name='textbox' cols='40'
rows='5'></textarea><br /><input type='button' value='ok' onclick='CreerLiens()' />";
20 }
21 catch(err){ }
22 }
23
24 var nbmotsparphrase = new Array();
25 var nbtotalmots;
26
27 function CreerLiens(){
28 try {
29 var numlien="";
30 txtsaisi = document.getElementById("textbox").value;
31 var reg1 = new RegExp('\n',"g");
32 var Lignes = txtsaisi.split(reg1);
33 var nbdelignes = Lignes.length;
34 var txt="";
35 var ligne="";
36 var nbmotsparligne;
37 for (var i=0; i<nbdelignes; i++){
38 // pour chaque ligne on isole la phrase, on l'épure
39
40 Lignes[i] = Lignes[i] +"<br\/>";
41 ligne = Lignes[i];
42
43 var reg2 = new RegExp("[ :;!]+", "g");
44 motsparligne = ligne.split(reg2);
45
46 nbmotsparligne = motsparligne.length;
47
48 nbtotalmots += nbmotsparligne; //mauvais NaN
49 for (var j=0; j<nbmotsparligne; j++){
50 numlien = "b"+i+""+j;
51 motsparligne[j] = "<a href=\"javascript:;\" id=\""+numlien+"\"
onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;"; /* espace
nécessaire */
52
53 txt += motsparligne[j];
54 }
55 }
56 document.getElementById("divtxt").innerHTML = "<div id=\"divLien\">"+txt+
"<\/div>";
57 }
58 catch(err2){ }
59 }
60
61
62 function trouElement(obj){
63 lien = document.getElementById(obj).firstChild.data;
64 var nbCaracteres = lien.length;
65
66 document.getElementById(obj).innerHTML = "<input type='text' style='width:"+7*
nbCaracteres+"px'\/>";
67 }

**jeca** · 24/10/2008, 07h14

Bonjour,

Je pense que tu liras ceci avec intérêt :
http://club.developpez.com/regles/

**le_chomeur** · 24/10/2008, 09h19

bonjour et bienvenue

svp au secours, je ne comprends plus rien !! merci de votre aide !

moi non plus , nous parlons pourtant la même langue donc expose nous ton problème en plus de ton code source

**Auteur** · 25/10/2008, 12h39

bonjour,

première remarque :

Code :

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

//--></script>

ta balise script est en commentaire. Ecris plutôt :

Code :

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

1
2
3
 
//-->
</script>

Est-ce que le navigateur retourne une erreur ? (Sous Firefox ouvre la console d'erreurs dans le menu Outils).

**bobbybrown** · 25/10/2008, 13h03

merci.

Code :

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

//--></script>

semble n'avoir aucune incidence.
l'erreur retournée est :

Code :

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

1
2
3
lien00 is not defined
onclick(click clientX=37, clientY=92)8W%2BdWP...32A%3D%3D (ligne 2)
[Break on this error] trouElement(lien00);

**bobbybrown** · 25/10/2008, 13h12

aussi, par ex. dans ce

Code :

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

motsparligne[j] = "<a href='javascript:;' id=\""+numlien+"\" onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;";

je m'embrouille souvent entre les cotes et guillements, connaissez-vous une autre méthode que

Code :

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

1
2
3
4
5
6
7
   1. function addslashes(str) {
   2.      str=str.replace(/\'/g,'\\\'');
   3.      str=str.replace(/\"/g,'\\"');
   4.      str=str.replace(/\\/g,'\\\\');
   5.      str=str.replace(/\0/g,'\\0');
   6.      return str;
   7. }

?

**bobbybrown** · 25/10/2008, 14h02

c'est drôle,avec numlien =""; :

Code :

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

numlien = i+""+j

et

Code :

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

numlien = 1+""+i+""+j

ça fonctionne, mais pas

Code :

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

numlien = "b"+i+""+j;

ni même

Code :

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

numlien = "b"+1+i+""+j;

**bobbybrown** · 25/10/2008, 17h24

le résultat du programme est l'input dans le texte du lien.. par ex :

Code :

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

1
2
3
4
<a id="1000" onclick="trouElement(1000)" href="javascript:;">
<input type="text" style="width: 49px;"/>
</a>
<a id="1010" onclick="trouElement(1010)" href="javascript:;">=</a>

ou alors j'obtiens :

Code :

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

1
2
3
<input style="width: 96px;">
<a id="1040" onclick="trouElement(1040)" href="javascript:;">"-//W3C//DTD</a>
</input>

or, je souhaite remplacer le lien par l'input text, en vain je ne trouve pas le bon node item..
merci

**bobbybrown** · 25/10/2008, 18h52

bon, merci à tous pour votre précieuse aide, c'est très gentil.
le programme fonctionne..mais persistent des erreurs, comme cette impossibilité de supprimer entièrement un lien et de le remplacer par un input type text. ceux-ci s'imbriquent !! je crois chercher l'équivalent de l'ancien outerHTML..?

voici le code entier :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
4 <title>Texte à trous</title>
5 <link rel="shortcut icon" type="image/x-icon" href="jfjr.ico" />
6
7 <script type="text/javascript"><!--
8
9 var Lignes = new Array();
10 var phrases = new Array();
11 var motsparligne = new Array();
12 var num;
13 var newdiv;
14 var txtsaisi="";
15
16 function chargement() {
17 try {
18 newdiv = document.getElementById("divtxt");
19 newdiv.innerHTML = "&nbsp;<textarea id='textbox' name='textbox' cols='40'
rows='5'></textarea><br /><input type='button' value='ok' onclick='CreerLiens()' />";
20 }
21 catch(err){ }
22 }
23
24 var nbmotsparphrase = new Array();
25 var nbtotalmots;
26
27 function CreerLiens(){
28 try {
29 var numlien="";
30 txtsaisi = document.getElementById("textbox").value;
31 var reg1 = new RegExp('\n',"g");
32 var Lignes = txtsaisi.split(reg1);
33 var nbdelignes = Lignes.length;
34 var txt="";
35 var ligne="";
36 var nbmotsparligne;
37 for (var i=0; i<nbdelignes; i++){
38 // pour chaque ligne on isole la phrase, on l'épure
39
40 Lignes[i] = Lignes[i] +"<br\/>";
41 ligne = Lignes[i];
42
43 var reg2 = new RegExp("[ :;!]+", "g");
44 motsparligne = ligne.split(reg2);
45
46 nbmotsparligne = motsparligne.length;
47
48 nbtotalmots += nbmotsparligne; //mauvais NaN
49 for (var j=0; j<nbmotsparligne; j++){
50 numlien = 1+""+i+""+j+""+i;
51
52 motsparligne[j] = "<a href=\"javascript:;\" id=\""+numlien+"\"
onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;"; /* espace
nécessaire */
53
54 txt += motsparligne[j];
55 }
56 }
57 document.getElementById("divtxt").innerHTML = "<div id=\"divLien\">"+txt+
"<\/div>";
58 }
59 catch(err2){ }
60 }
61
62
63 function trouElement(obj){
64 try{
65 var source = document.getElementById(obj);
66 lien = document.getElementById(obj).firstChild.data;
67 var nbCaracteres = lien.length;
68 var fragment = document.createDocumentFragment();
69 var champmot = document.createElement("input");
70 var longmot = "width:"+8*nbCaracteres+"px";
71 champmot.setAttribute("style",longmot);
72
73 champmot.appendChild(source.cloneNode(true));
74 fragment.appendChild(champmot)
75 source.parentNode.replaceChild(fragment, source);
76
77 //document.getElementById(obj).innerHTML = "<input type='text' style='width:"+7*nbCaracteres+"px'\/>";
78 }
79 catch(err3){ }
80 }
81
82 //-->
83 </script>
84 <style type="text/css" media="screen">
85 <!--
86 #conteneur{
87 background: #CED7E7;
88 color: #000;
89 border: 2px solid #ccc;
90 padding: 1em;
91 }
92
93 .imghomepage{
94 width: 20px;
95 height: 20px;
96 }
97
98 img { border:0; }
99
100 #textbox{
101 width:500px;
102 height:200px;
103 }
104
105 #menu{
106 color: #0000FF;
107 }
108
109 a:link {
110 color: #000000;
111 text-decoration: none;
112 font-weight: normal;
113 font-style: normal;
114 }
115
116 a:visited {
117 color: #3399FF;
118 text-decoration: underline;
119 background-color: #FFFFFF;
120 font-weight: normal;
121 font-style: italic;
122 }
123
124 a:hover {
125 color: #0000FF;
126 text-decoration: underline;
127 background-color: #FFFF00;
128 font-style: normal;
129 }
130
131 a:active {
132 color: #FF0000;
133 text-decoration: none;
134 background-color: #CCCCCC;
135 font-weight: bold;
136 font-style: normal;
137 }
138
139 -->
140 </style>
141 </head>
142 <body>
143 <a href="javascript:;" id="menu" onclick="history.go(0);">Clear</a>&nbsp;&nbsp;-
&nbsp;
144 <a href="javascript:;" id="menu" ondblclick="window.location.reload(true);">
Reload (double clic)</a> <br />
145 <div id="conteneur">
146 <img id="addrep" src="flechaddrep.png" />&nbsp;
147 <a href="javascript:;" id="menu" onclick="chargement();">saisir un texte</a><br
/><br />
148 <div id="divtxt"></div>
149 </div>
150 </body>
151 </html>

ou sans les numéros de ligne pour ceux qui préfèrent:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Texte à trous</title>
<link rel="shortcut icon" type="image/x-icon" href="nad.ico" />
 
<script type="text/javascript"><!--
 
var Lignes = new Array();
var phrases = new Array();
var motsparligne = new Array();
var num;
var newdiv;
var txtsaisi="";
 
function chargement() {
    try {
		newdiv = document.getElementById("divtxt");
		newdiv.innerHTML = "&nbsp;<textarea id='textbox' name='textbox' cols='40' rows='5'></textarea><br /><input type='button' value='ok' onclick='CreerLiens()' />";
	}
	catch(err){ }
}
 
var nbmotsparphrase = new Array();
var nbtotalmots;
 
function CreerLiens(){
	try {
		var numlien="";
txtsaisi = document.getElementById("textbox").value;
		var reg1 = new RegExp('\n',"g");
		var Lignes = txtsaisi.split(reg1);
		var nbdelignes = Lignes.length;
		var txt="";
		var ligne="";
		var nbmotsparligne;
		for (var i=0; i<nbdelignes; i++){
			// pour chaque ligne on isole la phrase, on l'épure
 
			Lignes[i] = Lignes[i] +"<br\/>";
			ligne = Lignes[i];
 
			var reg2 = new RegExp("[ :;!]+", "g");
			motsparligne = ligne.split(reg2);
 
			nbmotsparligne = motsparligne.length;
 
			nbtotalmots += nbmotsparligne;   //mauvais  NaN
			for (var j=0; j<nbmotsparligne; j++){
				numlien = 1+""+i+""+j+""+i;
 
				motsparligne[j] = "<a href=\"javascript:;\" id=\""+numlien+"\" onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;";  /*  espace nécessaire  */
 
				txt += motsparligne[j];
			}
		}
		document.getElementById("divtxt").innerHTML = "<div id=\"divLien\">"+txt+"<\/div>";
  }
	catch(err2){ }
}
 
 
function trouElement(obj){
  try{
	var source = document.getElementById(obj);
	lien = document.getElementById(obj).firstChild.data;
	var nbCaracteres = lien.length;
	var fragment = document.createDocumentFragment();
	var champmot = document.createElement("input");
	var longmot = "width:"+8*nbCaracteres+"px";
	champmot.setAttribute("style",longmot);
 
	champmot.appendChild(source.cloneNode(true));
	fragment.appendChild(champmot)
	source.parentNode.replaceChild(fragment, source);
 
	//document.getElementById(obj).innerHTML = "<input type='text' style='width:"+7*nbCaracteres+"px'\/>";
  }
  catch(err3){ }
}
 
//-->
</script>
<style type="text/css" media="screen">
<!--
#conteneur{
    background: #CED7E7;
    color: #000;
    border: 2px solid #ccc;
    padding: 1em;
}
 
.imghomepage{
	width: 20px;
	height: 20px;
}
 
img { border:0; } 
 
#textbox{ 
	width:500px;
	height:200px;
}
 
#menu{
	color: #0000FF;
}
 
a:link {
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
}
 
a:visited {
    color: #3399FF;
    text-decoration: underline;
    background-color: #FFFFFF;
    font-weight: normal;
    font-style: italic;
}
 
a:hover {
    color: #0000FF;
    text-decoration: underline;
    background-color: #FFFF00;
    font-style: normal;
}
 
a:active {
    color: #FF0000;
    text-decoration: none;
    background-color: #CCCCCC;
    font-weight: bold;
    font-style: normal;
}
 
-->
</style>
</head>
<body>
 <a href="nad.php"><img src="home.png" class="imghomepage" alt="home page" title="home page"/></a>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:;" id="menu" onclick="history.go(0);">Clear</a>&nbsp;&nbsp;-&nbsp;
	<a href="javascript:;" id="menu" ondblclick="window.location.reload(true);">Reload (double clic)</a>  <br />
<div id="conteneur">
	<img id="addrep" src="flechaddrep.png" />&nbsp;
	<a href="javascript:;" id="menu" onclick="chargement();">saisir un texte</a><br /><br />
	<div id="divtxt"></div>
</div>
</body>
</html>

merci pour vos conseils !

remplacer un lien par un champ text ?

JavaScript

Discussions similaires

Partager

Partager