Javascript 如何检查文本光标是否位于contenteditable div内？

我正在使用一个名为的富文本编辑器，它生成一个

contenteditable

div，如下所示：

当然，该div包含编辑器中当前任何内容的HTML。HTML通常是嵌套的

是否有一种巧妙的方法可以轻松确定文本光标（插入符号）当前是否位于

contenteditable

div中？如果不是，检查文本光标是否位于

contenteditable

div或

contenteditable

div的子节点内的最佳方法是什么

---

我使用的是香草JavaScript。

我不知道我是否理解你的问题。 如果您想知道coursor是否在该div内，则解决方案可能是onmouseover事件

<div class="ql-editor" data-gramm="false" contenteditable="true" onmouseover= "isInside()">

或者，您可以在Javascript中完成所有操作，但必须向该div添加ID。例如，div将是：textDiv

Let textDiv = document.getElementById("textDiv");
textDiv.addEventListener("mouseover",function(){
    Console.log("Coursor is inside !");
});

---

只需使用

document.activeElement

和

Element.closest

API即可

const activeDiv = document.activeElement.closest('[contenteditable]');

mouseup（e）上的函数{ const activeDiv=document.activeElement.closest（“[contenteditable]”）； console.log（activeDiv）； const outputElement=document.getElementById（'output-element'）； outputElement.innerText=activeDiv.id； } const textarea1=document.getElementById（'ta-example-one'）； const textarea2=document.getElementById（'ta-example-two'）； textarea1.addEventListener（'mouseup'，onMouseUp，false）； textarea2.addEventListener（'mouseup'，onMouseUp，false）

福巴巴兹酒店
福巴巴兹酒店
活动元素ID:

好的，所以我尝试了不同的方法。看来你想知道那个部门是否有焦点。（例如，如果您的div是输入元素，并且您想知道当前是否处于焦点状态）

试试这个

let textDiv =document.getElementById('textDiv');
   testDiv.addEventListener('focus',function(){
   if(testDiv.focus){
      console.log('coursor inside!')
   }
})

---

也许会有用

对不起，我不清楚。我指的是文本光标（插入符号）。我更新了我的问题以使其更加清晰。那么键盘导航呢？太棒了，它看起来像

document.activeElement的布尔值。如果文本光标位于
contenteditable
中，则最近（[contenteditable]”）的值为
true
。
let textDiv =document.getElementById('textDiv');
   testDiv.addEventListener('focus',function(){
   if(testDiv.focus){
      console.log('coursor inside!')
   }
})