Как узнать, стоит ли курсор мыши рядом с DIV-элементом в contenteditable?

Question

Пишу редактор текста в котором необходимо реализовать механизм "защиты" от удаления блоков цитат с помощью клавиши backspace. Если курсор находится под блоком, то при нажатии backspace блок не должен удаляться как обычная строка, то есть ничего не должно происходить. Теги <p> не используются, как и <br />.

У меня есть вот этот код:

document.getElementById('editor').addEventListener('keydown', function(event)
        {
            if(event.keyCode == 8)
            {
                var range = window.getSelection().getRangeAt(0);
                
                if(range.collapsed)
                {
                    var text = range.startContainer.innerHTML.substr(0, range.startOffset + 20);
                    
                    if(text.includes('div'))
                    {
                        event.preventDefault();
                    }
                }
            }
        });

и он работает, но не всегда. Почему-то переменная text возвращает начало div, а не его конец: <div class=..., а должно быть: ...держание дива</div>. Иногда переменная вообще пустая...

Иными словами: в редакторе есть чистый текст без тегов и надо определить, стоит курсор рядом с </div> или нет. Если стоит, то ничего не происходит при нажатии на backspace:

какой-нибудь текст <div class=...></div>| дальше текст — при нажатии backspace ничего не происходит.

Помогите решить задачу.

Answer 1

Мне, кажется вам лучше использовать определение над каким элементам находится курсор и есть ли у него атрибут contenteditable.

function onEvent(e) {
  var elem = e.target || e.currentTarget;
  if(elem.getAttribute('contenteditable') != null) {
    console.log('Курсор на теге');
  }
}

[].forEach.call(document.querySelectorAll('.content *'), function (item) {
    if (document.addEventListener) {
        item.addEventListener('mouseenter', onEvent, false);
    } else  {
      item.onmouseenter = onEvent;
    }
});

<html lang="ru">
    <head>
        <title>title</title>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
    </head>
    <body>
        <div class="content">
      <div class="noedit">no edit no edit noedit</div>
      <div contenteditable> edit  edit edit</div>
      <div class="noedit">no edit no edit noedit</div>
      <div contenteditable> edit  edit edit</div>
    </div>
    </body>
</html>

БЛОГ НА HUSL

Как узнать, стоит ли курсор мыши рядом с DIV-элементом в contenteditable?

Ответы (1 шт):