按下 Enter 键时选择 contenteditable div 的元素

Question

我想获取事件发生的元素。此代码段仅记录父元素
例如。 . 如何记录按下键的当前元素例如。第一或第二

document.getElementById('text').addEventListener('keypress', event => {
console.clear();              
console.log(event.target)})

<body>
    <div id="text" contenteditable="true">
        <div>1st</div>
        <div>2nd</div>
    </div>
</body>

Answer 1

更新：这应该可以解决问题：

<div id="text" contenteditable="true">
    <div>1st</div>
    <div>2nd</div>
</div>
<script>
document.getElementById('text').addEventListener('keypress', function(ev) {
      var selection = window.getSelection();
      var range = selection.getRangeAt(0);
      var container = range.commonAncestorContainer;
      var nodeParent = container.parentNode;
      console.log(nodeParent);
});
</script>

它检查当前选择（光标从头到尾选择的文本）。在您的情况下，即在 keypress，选择从开始到结束都是相同的，即光标的实际位置。

Selection可以包含多个范围（各种节点，包括文本节点），具体取决于用户在页面上选择的内容。这里我们只对第一个感兴趣，也就是光标所在的地方，所以我们做 getRangeAt(0).

然后查看共同祖先容器，即当前正在编辑的文本。 commonAncestorContainer 是 Range 所在的节点。在这种情况下，它要么是带有文本“1st”的文本节点，要么是带有文本“2nd”的文本节点。

现在我们有了包含当前 Selection 的第一个 Range 的文本节点，我们可以看到它的 parentNode，即当前 div。

这样做有用吗？

按下 Enter 键时选择 contenteditable div 的元素

Selecting element of an contenteditable div when Enter Key is pressed

html

javascript

parent-child