在contentEditable div内的桌子上的keydown

I have a div in my dom which is contentEditable and that div contains a table inside it.

我的dom中有一个div,它是contentEditable,div里面有一个表。

<div contentEditable>

   <table id="editableTable">
      <tr>
         <td> My content </td>
     </tr>
  </table>
</div>

I can edit the value of td.

我可以编辑td的值。

But however when I attach a keydown event listner on that table (or td), the event is not triggered. The keydown is triggered on the contentEditable div only.

但是当我在该表(或td)上附加keydown事件列表器时,事件不会被触发。仅在contentEditable div上触发keydown。

How to listen to the keydown event on the table(or td) but not on the contentEditable div?

如何在表(或td)上监听keydown事件,但不在contentEditable div上监听?

1 个解决方案

#1

Only elements that can receive focus (such as inputs and contenteditable elements) fire key events. This does not include elements within contenteditable elements.

只有可以获得焦点的元素(例如输入和contenteditable元素)才会触发关键事件。这不包括满足要素的元素。

You can use the selection object to check where the caret is and therefore whether the key event originated from somewhere inside the table. The following will work in all major browsers except IE <= 8:

您可以使用选择对象来检查插入符的位置,从而检查键事件是否源自表内的某个位置。除了IE <= 8之外,以下内容适用于所有主流浏览器:

function isOrIsDescendantOf(node, ancestorNode) {
  while (node) {
    if (node == ancestorNode) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

function caretIsInside(node) {
  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.focusNode) {
      return isOrIsDescendantOf(sel.focusNode, node);
    }
  }
  return false;
}
  
window.onload = function() {
  document.getElementById("editor").addEventListener("keydown", function() {
    var table = document.getElementById("editableTable");
    document.getElementById("info").innerHTML = "keydown came from table: " + caretIsInside(table);
  }, false);
};

table * {
  color: blue;
  font-weight: bold;
}

<div contenteditable="true" id="editor">
  <p>Non-table content. Type in here</p>

   <table id="editableTable">
      <tr>
         <td>Table content. Type in here</td>
     </tr>
  </table>
</div>
<div id="info"></div>