javascript - 获取可编辑div中的光标父级

Question

我有一个内容可编辑的 div，如下所示:

<div class="note" contenteditable="true">
   ABCD
   <div class="first">EFGH</div>
   <div class="second">IJKL</div>
   MNOP
</div>

因此这使得整个代码可编辑。我需要找出的是，在每次按键时，哪个元素包含光标。因此，如果光标位于 E 之后，它应该会生成类 first 的 div。

我尝试在子 div 上使用 focus() 事件，但当父 div 为 contenteditable 时，该事件不会被触发。

Answer 1

这应该为您提供插入符号(闪烁文本光标)当前所在的元素:

let caretElement = document.getSelection().anchorNode.parentNode;

下面是一个在您移动时突出显示该元素的示例:

setInterval(()=>{
  let marked = document.querySelector(".marked");
  if (marked) {
      marked.classList.remove("marked");
  }
  
  let currentElement = document.getSelection().anchorNode;
  if (currentElement) {
    currentElement.parentNode.classList.add("marked");
  }
},200);

.marked {
  background-color:#f00;
}

<div class="note" contenteditable="true">
   ABCD
   <div class="first">EFGH</div>
   <div class="second">IJKL</div>
   MNOP
</div>