javascript - 如何在按键上获取 div 的内容，以便它还包括在该按键上输入的文本？

Question

我有一个 contenteditable div，用户可以在其中输入或修改文本。我想在另一个 div html 代码中显示文本：

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

javascript代码：

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

    };

但它显示的内容比我在"a1"div 中的实际数据少一个字母或多一个字母如果我按退格键。我想同步两个 div 中的内容，即在此按键事件后修改的文本。我如何实现这一目标？

Answer 1

您应该使用onkeyup事件而不是onkeypress. 它更实时，因为它在按键之前触发:)

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

Answer 2

请改用 onkeyup 事件。当密钥被释放并且新密钥已经注册时，它就会启动。onkeypress 的另一个问题是它只适用于可打印的字符，所以它不会触发退格

Answer 3

尝试更改x.onkeypressfor x.onkeyup，因为在您按下键时会发生动作，在系统输入键之前

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;
};

这是此链接以供更多参考