How do I get the content of the div on a key press so that it also includes the text which was entered on that keypress?

Question

I have a contenteditable div and the user can enter or modify the text in it.I want to display the text in another div html code:

    <div contenteditable="true" id ="a1">
    </div>
    <div id="a2">
    </div>

the javascript code:

    var x=document.getElementById("a1");
    x.onkeypress=function(){
    var z= document.getElementById("a2");
    z.innerHTML=x.innerHTML;

    };

but it displays the content with one letter less than the actual data i have in the "a1" div or one letter more If I press the back-space key.I want to synchronize the content in both divs i.e. the modified text after this key press event.How do I achieve this?

Answer 1

You should use the onkeyup event instead of onkeypress . It's more realtime since it fires before keypress :)

var x=document.getElementById("a1");
x.onkeyup=function()
{
  var z= document.getElementById("a2");
  z.innerHTML=x.innerHTML;
};