keydown在contentEditable div内的表格上 [英] keydown on a table inside a contentEditable div

问题描述

我在我的dom中有一个div，它是contentEditable，div里面包含一个表格。

 < div contentEditable> 
 
< table id =editableTable> 
< tr> 
< td>我的内容< / td> 
< / tr> 
< / table> 
< / div> 
  

我可以编辑td的值。

<但是，当我在该表（或td）上附加一个keydown事件列表器时，事件不会被触发。
只在contentEditable div触发keydown。

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

解决方案

只有可以获得焦点的元素（例如输入和 contenteditable 元素）火灾重点事件。这不包括contenteditable元素中的元素。

您可以使用选择对象来检查插入符的位置，从而确定键事件是否源自表中的某处。以下将适用于所有主流浏览器，除了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 = trueid =editor> < p>非表格内容。在此输入< / p> < table id =editableTable> < TR> < td>表格内容。在此输入< / td> < / TR> < / table>< / div>< div id =info>< / div>

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

<div contentEditable>

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

I can edit the value of 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.

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

解决方案

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

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:

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>

这篇关于keydown在contentEditable div内的表格上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！