키 누르기에서 div의 내용을 가져와 해당 키 누르기에 입력 된 텍스트가 포함되도록하려면 어떻게합니까?

Question

는 난의 contentEditable 사업부를 가지고 하란 다른 사업부 HTML 코드의 텍스트를 표시 할에 사용자가 입력하거나 텍스트를 수정할 수 있습니다

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

자바 스크립트 코드 :

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

    }; 

을 하지만 하나의 글자가 실제 데이터보다 작습니다. "a1" div 또는 한 글자가 더 큽니다. 백 스페이스 키를 누르면 두 div의 내용 즉이 키 누르기 이벤트 이후에 수정 된 텍스트를 동기화하려고합니다. 어떻게 이것을 할 수 있습니까?

Answer 1

onkeypress 대신 onkeyup 이벤트를 사용해야합니다. 그것은 키를 누르기 전에 발생하기 때문에 더 실시간입니다 :)

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

Answer 2

대신 onkeyup 이벤트를 사용하십시오. 키를 놓으면 새로운 키가 등록됩니다. 때 onKeyPress에 또 다른 문제는 인쇄 가능한 문자를 작동, 그래서 그것은 백 스페이스에 대한 발생하지 않습니다

Answer 3

키를 누를 때 시스템이있다 전에 작업이 진행되고 있기 때문에, x.onkeyup에 대한 x.onkeypress 변화 시도 키 입력

var x=document.getElementById("a1"); 
//use onkeyup to process the key after the input 
x.onkeyup=function(){ 
    var z= document.getElementById("a2"); 
    z.innerHTML=x.innerHTML; 
}; 

여기에 더 참조 용