Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue.
1. My content div seems to be lagging behind. When I type in my editor, it displays one character less in the content div.
2. The same problem occurs when I press the backspace key to delete a character. I have to press the backspace key twice (deleting two characters from the text editor) to remove a single character from the content div.
I want both the editor and content div to be synchronized. This means that any text I add or delete in the editor should reflect in the content div as well.
How can I achieve this?
var editor=document.getElementById('editor');
var content=document.getElementById('content');
editor.addEventListener('keypress',function(e){
content.innerHTML=editor.innerHTML;
});#editor{
position:relative;
width:500px;
height:400px;
border:1px solid black;
word-wrap: break-word;
padding-left:4px;
padding-right:4px;
padding-bottom:1em;
box-sizing:border-box;
overflow:scroll;
}
#content{
position:relative;
width:500px;
height:400px;
border:1px solid black;
word-wrap: break-word;
padding-left:4px;
padding-right:4px;
padding-bottom:1em;
box-sizing:border-box;
overflow:scroll;
}<div id='editor' contenteditable='true' ></div>
<div id='content'></div>