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

【问题标题】：Get cursor parent in editable div在可编辑的div中获取光标父级
【发布时间】：2019-02-17 21:33:55
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery html

【解决方案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>

【讨论】：