第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何檢查文本光標(biāo)是否在可內(nèi)容編輯的 div 內(nèi)？

如何檢查文本光標(biāo)是否在可內(nèi)容編輯的 div 內(nèi)？

慕工程0101907 2022-12-18 16:09:52
我正在使用一個(gè)名為Quill的富文本編輯器，它生成一個(gè)contenteditable像這樣的 div：<div class="ql-editor" data-gramm="false" contenteditable="true"></div>當(dāng)然，該 div 然后包含編輯器中當(dāng)前任何內(nèi)容的 HTML。HTML 通常是嵌套的。是否有一種巧妙的方法可以輕松確定文本光標(biāo)（插入符號(hào)）當(dāng)前是否在contenteditablediv 內(nèi)？如果不是，檢查文本光標(biāo)是否在contenteditablediv 或 div 的子節(jié)點(diǎn)內(nèi)的最佳方法是contenteditable什么？我正在使用普通的 JavaScript。
查看完整描述

3 回答

?
繁花不似錦

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊

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


查看完整回答
反對(duì) 回復(fù) 2022-12-18
?
狐的傳說

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


試試這個(gè)。


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

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

   if(testDiv.focus){

      console.log('coursor inside!')

   }

})

也許它會(huì)起作用


查看完整回答
反對(duì) 回復(fù) 2022-12-18
?
繁星淼淼

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊

我不知道我是否答對(duì)了你的問題。如果你想知道 coursor 是否在那個(gè) 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 !");

});


查看完整回答
反對(duì) 回復(fù) 2022-12-18
  • 3 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)