HTML contenteditable 元素 return 上的 onkeyup 事件未定义

Question

我正在尝试绑定 div 元素文本值，基于 div contenteditable 元素的另一个文本，使用如下所示的 onkeyup 事件：

var input = document.getElementById('editor');

    input.onkeyup = function() {
  document.getElementById('console').innerHTML = input.text;
  }

这是我的标记：

<div id="editor" contenteditable>text here</div>

<div id="console"></div>

或者这里是 demo

但它不起作用。我希望我们在 contenteditable div 元素上键入的任何文本也直接在 <div id="console"></div>

上更改

很抱歉给你一个混乱的解释，希望你们理解我的问题，我的问题是我该如何解决这个问题？或者有什么想法吗？

Answer 1

问题是input.text。 HTML 元素没有名为 text 的属性，因此当您获取值时，它是 undefined。也许你想要 innerText?

var input = document.getElementById('editor');

input.onkeyup = function() {
  console.log(input.innerText)
  document.getElementById('console').innerHTML = input.innerText;
}

<div id="editor" contenteditable>Type here</div>

<div id="console"></div>

HTML contenteditable 元素 return 上的 onkeyup 事件未定义

onkeyup event on HTML contenteditable element return undefined

javascript

jquery

onkeyup