首頁猿問如何檢查文本光標是否在可內容編輯的...

如何檢查文本光標是否在可內容編輯的 div 內？

JavaScript

慕工程0101907 2022-12-18 16:09:52

我正在使用一個名為Quill的富文本編輯器，它生成一個contenteditable像這樣的 div：<div class="ql-editor" data-gramm="false" contenteditable="true"></div>當然，該 div 然后包含編輯器中當前任何內容的 HTML。HTML 通常是嵌套的。是否有一種巧妙的方法可以輕松確定文本光標（插入符號）當前是否在contenteditablediv 內？如果不是，檢查文本光標是否在contenteditablediv 或 div 的子節點內的最佳方法是contenteditable什么？我正在使用普通的 JavaScript。

查看完整描述

3 回答

繁花不似錦

TA貢獻1851條經驗獲得超4個贊

只需使用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>

Foo bar baz plugh

</div>

Foo bar baz plugh

</div>

</form>

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

反對回復 2022-12-18

狐的傳說

TA貢獻1804條經驗獲得超3個贊

好的，所以我嘗試了一些不同的東西。您似乎想知道該 div 是否具有焦點。（例如，如果您的 div 是輸入元素，并且您想知道當前是否獲得焦點）。

試試這個。

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

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

if(testDiv.focus){

console.log('coursor inside!')

}

})

也許它會起作用

反對回復 2022-12-18

繁星淼淼

TA貢獻1775條經驗獲得超11個贊

我不知道我是否答對了你的問題。如果你想知道 coursor 是否在那個 div 解決方案中，可能是 onmouseover 事件。

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 !");

});

反對回復 2022-12-18

3 回答
0 關注
133 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何檢查文本光標是否在可內容編輯的 div 內？

如何檢查文本光標是否在可內容編輯的 div 內？

3 回答

添加回答