Question

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

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

因此这使整个代码可编辑。我需要找出的是，每次按键时，哪个元素包含光标。因此，如果光标位于E之后，它将导致div具有类first。

我尝试在子div上使用focus()事件，但是当父为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>

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

1 个答案: