onkeypress modification: div->Textarea; Textarea->div

**surfeur2** · 10/02/2015, 11h46

Bonjour,

Actuellement j'affiche dans un div un champ depuis une base php.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="xx" contenteditable="true" onkeyup="refr2();">
        <?php
                        $sql = "SELECT TextePresentation FROM Menu2";
                        $result = $mysqli->query($sql);
                        $ligne = $result->fetch_assoc();
                        echo $ligne["TextePresentation"];
                        mysql_close($mysqli);
                ?>
    	</div>

puis plus bas dans un textarea j'affiche en javascript le même contenu (affichage en html):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
	<script>
 
	function refr(){
		var text1 = document.getElementById("xx").innerHTML;	
		document.write("<textarea cols='80' rows='10' id='ta' onkeyup='refr3();'>" + text1 + "</textarea>");
	}
 
	refr();
 
	</script></td>

J'aimerai que lorsqu'on modifie le div en wysiwing (affichage texte) le textarea se modifie ---> Ceci fonctionne ---> OK

mais lorsque je modifie le textarea le contenu du div ne se modifie pas et en plus il change son mode d'affichage et affiche le code html.

Je vous met tout le code:

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
 
 
body {
	background-color: #2b3e53;
}
</style>
<link href="../css/mod.css" rel="stylesheet" type="text/css" />
<script language="javascript">
	function refr2(){
		document.getElementById('ta').innerHTML = document.getElementById("xx").innerHTML;		
	}
 
	function refr3(){
		document.getElementById('xx').innerHTML = document.getElementById("ta").innerHTML;		
	}
</script>
</head>
<body>
<form name="adPresentation" method="post" action="enrPresentation.php" enctype="multipart/form-data">
<table width="50%" border="0" align="center" class="arrondie" style="border:solid 1px #000000; background-color:#FFFFFF; background-image:url(../Contenu/images/fil_jol3.jpg); background-repeat: no-repeat; 	background-position: center bottom ;">
  <tr>
    <td colspan="2" align="center" valign="middle"><h2 class="vert"><a href="gestion.php"><img src="../Contenu/images/admin.png" width="101" height="26" border="0" align="absmiddle" /></a> Presentation</h2></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="31%" align="right"><b class="bleu">Image actuelle</b></td>
    <td width="50%"><img src="/admin/upload/imgPresentation.jpg" width="310" height="15" /></td>
  </tr>
  <tr>
    <td align="right" valign="top"><b class="rouge">Changer l'image</b></td>
    <td><input type="file" name="imgPresentation" id="imgPresentation" /></td>
  </tr>
  <tr>
    <td colspan="2"><hr width="55%" color="#CC6600" /></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="top"><b class="bleu">Texte</b></td>
    <td>
    	<div id="xx" contenteditable="true" onkeyup="refr2();">
        <?php
                        $sql = "SELECT TextePresentation FROM Menu2";
                        $result = $mysqli->query($sql);
                        $ligne = $result->fetch_assoc();
                        echo $ligne["TextePresentation"];
                        mysql_close($mysqli);
                ?>
    	</div>
  </td>
  </tr>
  <tr>
    <td>&nbsp;
    </td>
    <td> 
	<script>
 
	function refr(){
		var text1 = document.getElementById("xx").innerHTML;	
		document.write("<textarea cols='80' rows='10' id='ta' readonly='readonly' onkeyup='refr3();'>" + text1 + "</textarea>");
	}
 
	refr();
 
	</script></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="envoyé" id="envoyé" value="Mise à jour" style="cursor:pointer;"  /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>

merci d'avance pour votre réponse!

**-Rpass-** · 10/02/2015, 16h01

innerHTML récupère tout le contenu html d'un élément, si c'est seulement le texte qui t'intéresse alors je te conseille elmt.textContent.
Ensuite je te conseille de créer le textarea directement en html puis d'insérer ton texte à l'intérieur ensuite, ça t'évitera des problèmes

onkeypress modification: div->Textarea; Textarea->div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager