如何检查文本光标是否在可内容编辑的 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) {&nbsp; const activeDiv = document.activeElement.closest('[contenteditable]');&nbsp;&nbsp;&nbsp; console.log(activeDiv);&nbsp;&nbsp;&nbsp; const outputElement = document.getElementById('output-element');&nbsp; 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');&nbsp; &nbsp;testDiv.addEventListener('focus',function(){&nbsp; &nbsp;if(testDiv.focus){&nbsp; &nbsp; &nbsp; console.log('coursor inside!')&nbsp; &nbsp;}})也许它会起作用

Answer 3

我不知道我是否答对了你的问题。如果你想知道 coursor 是否在那个 div 解决方案中，可能是 onmouseover 事件。<div class="ql-editor" data-gramm="false" contenteditable="true" onmouseover= "isInside()">function isInside(){&nbsp; Console.log("Coursor is inside!")}&nbsp;或者你可以用 Javascript 完成这一切，但你必须将 ID 添加到该 div。例如 div 将是：textDiv。Let textDiv = document.getElementById("textDiv");textDiv.addEventListener("mouseover",function(){&nbsp; &nbsp; Console.log("Coursor is inside !");});