Захват событий нажатия клавиш / вниз / вверх на потомке contenteditable элемента - PullRequest
Новая
       51

Захват событий нажатия клавиш / вниз / вверх на потомке contenteditable элемента

1 голос
/ 06 апреля 2020

Я уже читал о подобных проблемах, подобных этой топи c События на дочерних элементах contenteditable элемента , но я до сих пор не могу найти никакого решения.

https://jsfiddle.net/zbxg7jop/

HTML

<div id="main" contenteditable="true"> </div>
<button id="addLine">Add a line</button>

JS

var func_add_line = function() {

  var div = document.createElement("div"),
      texte = document.createTextNode("Click me now or use your keyboard on me");
  div.appendChild(texte); 
  div.addEventListener("click",function(){ alert("Click is working") }, false);
  div.addEventListener("keypress",function(){ alert() }, false);
  document.getElementById("main").appendChild(div)
}

document.getElementById("addLine").addEventListener("click", func_add_line, false)

Я знаю, это потому, что только родительский элемент с атрибутом contenteditable получает ключевые события , событие пузырится. И то же самое, если я использую event.target.

Итак, есть ли обходное решение для того, что я пытаюсь сделать?

Спасибо!

РЕДАКТИРОВАТЬ: Хорошо , кажется, работает, если, по крайней мере, промежуточный контейнер между родителем и потомком не является contenteditable. 

<div id="main" contenteditable="true">
    <div id="intermediate" contenteditable="false">
        <div class="appended" contenteditable="true"></div>
    </div>
</div>

Таким образом, я могу захватить ключевые события из внутреннего DIV. Но есть другие проблемы, связанные с этим решением, поэтому все еще ищем обходной путь:)

1 Ответ

0 голосов
/ 08 апреля 2020

Ну, я нашел обходной путь, который работает для меня, но на самом деле не решает захват ключевых событий

Я предпочел захватить все ключевые события в документе и проверить при любом входе позиция каретки, см .: 

var selectionRange;

var setSelection = function() {
  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      selectionRange = sel.getRangeAt(0);
    }
  } 
}

var caretParent = function(){
    var par = selectionRange.commonAncestorContainer;
    return (par.nodeType == 3) ? par.parentNode : par;
}

document.addEventListener('click', setSelection, false);
document.addEventListener('keyup', function(e){
  setSelection();
  var currentElem = caretParent();
  if (13 == e.keyCode && currentElem .className == "innerElem") {
    console.log("Yes We Did It !")
  }

}, false);

HTML: 

<div id="main" contenteditable="true">
    <div class="innerElem">I want to capture Key Events here !</div>
    <div class="innerElem">Me too !</div>
</div>

Все еще ищем обходной путь с захватом реальных событий ^^

...