在 contentEditable div 内的表上的 keydown答案

【问题标题】：keydown on a table inside a contentEditable div在 contentEditable div 内的表上的 keydown
【发布时间】：2014-10-13 12:11:26
【问题描述】：

我的 dom 中有一个 div，它是 contentEditable，并且该 div 中包含一个表格：

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

我可以编辑 td 的值。

但是，当我在该表（或 td）上附加 keydown 事件侦听器时，不会触发该事件。 keydown 仅在 contentEditable div 上触发。

如何在 table（或 td）上监听 keydown 事件而不是在 contentEditable div 上？

【问题讨论】：

table 或 td 不是输入字段。但是您可以在表单加载时设置 keydown 事件来为您的表格处理“某事”

标签： javascript html dom-events contenteditable

【解决方案1】：

只有可以接收焦点的元素（例如输入和contenteditable 元素）才会触发键事件。这不包括 contenteditable 元素中的元素。

您可以使用选择对象来检查插入符号的位置，从而检查键事件是否来自表内的某个位置。以下内容适用于除 IE

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>

【讨论】：