javascript - 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? -

i have contenteditable div , user can enter or modify text in it.i want display text in 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 displays content 1 letter less actual data have in "a1" div or 1 letter more if press back-space key.i want synchronize content in both divs i.e. modified text after key press event.how achieve this?

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

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