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

【问题标题】：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?如何在按键上获取 div 的内容，以便它还包括在该按键上输入的文本？
【发布时间】：2013-05-14 05:18:28
【问题描述】：

我有一个 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 中的内容，即修改后的文本在此按键事件之后。我该如何实现？

【问题讨论】：

标签： javascript innerhtml contenteditable onkeypress

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试将x.onkeypress 更改为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;
};

这里是this link 以获取更多参考

【讨论】：