Recopier texte taper dans une <div> dans une autre en temps réel

Version imprimable

31/12/2013, 15h25
6nawak

Recopier texte taper dans une <div> dans une autre en temps réel
Bonjour,

J'ai le code html suivant :
Code:

1 2 <div class="DivEditable" contenteditable="true"></div> <div class="DivVisuelle"></div>
Je souhaiterai que le texte tapé dans la DivEditable par l'utilisateur soit recopié dans la DivVisuelle en temps réel.

J'imagine que j'aurai besoin d'utiliser un onkeyup ou une fonction du type pour que le recopiage se fasse en temps réel.
Malheureusement j'ai beaucoup de mal à mettre en place ce simple code.

Quelqu’un pourrait il m'aider ?

Merci d'avance

Bonjour,
il te suffit de recopier le innerHTML de l'une dans l'autre.

en ayant le HTML suivant
Code:

1 2 <div id="srce" contenteditable="true"></div> <div id="dest"></div>
on aura le javascript suivant
Code:

1 2 3 4 5 var oSrce = document.getElementById('srce'); var oDest = document.getElementById('dest'); oSrce.onkeyup = function(){ oDest.innerHTML = oSrce.innerHTML; };

Merci beaucoup pour ta réponse Nosmoking,

Tu as parfaitement ciblé le code que je souhaitais avoir. Cependant est ce qu'il y a quelque chose que je fais mal quand je tente de mettre en place ton code ? Car ça ne fonctionne pas. Voici ce que je fais :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <script> var oSrce = document.getElementById('srce'); var oDest = document.getElementById('dest'); oSrce.onkeyup = function(){ oDest.innerHTML = oSrce.innerHTML; }; </script> </head> <body> <div id="srce" contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;"></div> <div id="dest" style="width: 100px; height: 100px; border: 1px solid black;"></div> </body> </html>

au moment où tu fais

Code:

1
2
var oSrce = document.getElementById('srce');
var oDest = document.getElementById('dest');

les éléments n'existe pas encore, il arrive après.

Il te faut donc au minimum mettre la partie SCRIPT après

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="srce" contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;"></div>
<div id="dest" style="width: 100px; height: 100px; border: 1px solid black;"></div>
<script>
var oSrce = document.getElementById('srce');
var oDest = document.getElementById('dest');
oSrce.onkeyup = function(){
  oDest.innerHTML = oSrce.innerHTML;
};
</script>
</body>
</html>

31/12/2013, 17h02
6nawak

Mille merci Nosmoking,

Tu viens de résoudre mon problème en seulement quelques minutes.

Encore merci et bonne journée