Как я могу проверить, находится ли текстовый курсор внутри содержимого div? - PullRequest
Новая
       37

Как я могу проверить, находится ли текстовый курсор внутри содержимого div?

1 голос
/ 02 августа 2020

Я использую текстовый редактор под названием Quill , который генерирует contenteditable div, например: 

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

Конечно, этот div затем содержит HTML для любого контент в настоящее время находится в редакторе. HTML часто бывает вложенным.

Есть ли удобный способ легко определить, находится ли текстовый курсор (курсор) в настоящий момент внутри contenteditable div? Если нет, то как лучше всего проверить, находится ли текстовый курсор внутри contenteditable div или дочернего узла contenteditable div?

Я использую vanilla JavaScript.

Ответы [ 3 ]

2 голосов
/ 02 августа 2020

Просто используйте 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>
0 голосов
/ 02 августа 2020

Хорошо, я попробовал что-то другое. Кажется, вы хотите знать, имеет ли этот div фокус. (Например, если ваш div был элементом ввода, и вы хотите знать, сфокусирован ли он в данный момент).

Попробуйте это. 

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

Возможно, это сработает

0 голосов
/ 02 августа 2020

Не знаю, правильно ли я понял ваш вопрос. Если вы хотите знать, находится ли курсор внутри этого div, может быть событие onmouseover. 

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

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

Или вы можете сделать все это в Javascript, но вам нужно добавить идентификатор к этому div . Например, div будет: textDiv. 

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