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

**6nawak** · 31/12/2013, 15h25

Bonjour,

J'ai le code html suivant :

Code html :

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

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

**NoSmoking** · 31/12/2013, 15h58

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

en ayant le HTML suivant

Code html :

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

1
2
<div id="srce" contenteditable="true"></div>
<div id="dest"></div>

on aura le javascript suivant

Code :

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

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

**6nawak** · 31/12/2013, 16h26

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

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

**NoSmoking** · 31/12/2013, 16h32

au moment où tu fais

Code :

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

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

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

**6nawak** · 31/12/2013, 17h02

Mille merci Nosmoking,

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

Encore merci et bonne journée

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

JavaScript

Discussions similaires

Partager

Partager