contenteditable div 上的 keyup 事件

Question

contenteditable div 上的 keyup 事件

Enter我正在尝试在按下后格式化 contenteditable div 中的文本。问题是没有从任何键注册任何键，因此这是不可能的。其他事件（例如“单击”）确实有效，如果我将元素更改为“文档”（document.addEventListener()...），这也会使其正常工作，但这是一个极端的解决方案。有一个简单的解决方案吗？

window.addEventListener('load', function() {
    var editbox = document.getElementById("editable")
    editbox.addEventListener('keyup', function(e) {
        alert("this should appear");
    });
});

Run Code Online (Sandbox Code Playgroud)

<main contenteditable="true">
    <div class="box" id="editable">
        text
    </div>
</main>

Run Code Online (Sandbox Code Playgroud)

Answer 1

zer*_*0ne 4

使用~~keyCode~~ event.key检测特定键 'Enter' = ENTER。使用event.target属性来准确检测在哪个元素上键入。div#editable位于mainwhich is内contenteditable，因此无法通过正常方式访问，因此main改为定位 the。

测试演示：

将光标置于蓝色轮廓区域内。
按ENTER键。
控制台应该记录ENTER按下的每个键。
现在单击轮廓区域下方并按ENTER。
keyup 事件被忽略并且没有记录任何内容。

演示

document.addEventListener('keyup', function(e) {
  if (e.key === 'Enter' && e.target.tagName === 'MAIN') {
    console.log('ENTER');
  }
});

Run Code Online (Sandbox Code Playgroud)

#editable {
  color: red
}

Run Code Online (Sandbox Code Playgroud)

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>title</title>
</head>

<body>
  <main contenteditable="true">
    <div class="box" id="editable">
      text
    </div>
  </main>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	8727 次
最近记录：	6 年前