如何检查文本光标是否在可内容编辑的 div 内？

Question

我正在使用一个名为Quill的富文本编辑器，它生成一个contenteditable像这样的 div：<div class="ql-editor" data-gramm="false" contenteditable="true"></div>当然，该 div 然后包含编辑器中当前任何内容的 HTML。HTML 通常是嵌套的。是否有一种巧妙的方法可以轻松确定文本光标（插入符号）当前是否在contenteditablediv 内？如果不是，检查文本光标是否在contenteditablediv 或 div 的子节点内的最佳方法是contenteditable什么？我正在使用普通的 JavaScript。

Answer 1

只需使用document.activeElement和Element.closestAPI。

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

function onMouseUp(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);

<form>

<div id="ta-example-one" data-gramm="false" contenteditable="true">

Foo bar baz plugh

</div>

<div id="ta-example-two" data-gramm="false" contenteditable="true">

Foo bar baz plugh

</div>

</form>

<p>Active element ID: <strong id="output-element"></strong></p>

Answer 2

好的，所以我尝试了一些不同的东西。您似乎想知道该 div 是否具有焦点。（例如，如果您的 div 是输入元素，并且您想知道当前是否获得焦点）。

试试这个。

let textDiv =document.getElementById('textDiv');

   testDiv.addEventListener('focus',function(){

   if(testDiv.focus){

      console.log('coursor inside!')

   }

})

也许它会起作用

Answer 3

我不知道我是否答对了你的问题。如果你想知道 coursor 是否在那个 div 解决方案中，可能是 onmouseover 事件。

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

function isInside(){

  Console.log("Coursor is inside!")

} 

或者你可以用 Javascript 完成这一切，但你必须将 ID 添加到该 div。例如 div 将是：textDiv。

Let textDiv = document.getElementById("textDiv");

textDiv.addEventListener("mouseover",function(){

    Console.log("Coursor is inside !");

});