如何检查文本光标是否在 contenteditable div 内？

Question

我正在使用一个名为 Quill 的富文本编辑器，它生成一个 contenteditable div，如下所示：

<div class="ql-editor" data-gramm="false" contenteditable="true">
</div>

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

是否有一种巧妙的方法可以轻松确定文本光标（插入符号）当前是否在 contenteditable div 内？如果不是，检查文本光标是否在 contenteditable div 或 contenteditable div 的子节点内的最佳方法是什么？

我正在使用原版 JavaScript。

Answer 1

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

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

function isInside(){
  Console.log("Coursor is inside!")
}

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

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

Answer 2

只需使用 document.activeElement 和 Element.closest API。

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 3

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

试试这个。

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

也许会奏效

如何检查文本光标是否在 contenteditable div 内？

How can I check if the text cursor is inside of a contenteditable div?

html

javascript

contenteditable