keydown on a table inside a contentEditable div

Question

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 listener 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?

table or td is not an input field. But you can set keydown event on form load to process 'something' for your table — Hendry Tanaka, Oct 13 '14 at 12:15

score 3 · Accepted Answer · answered Oct 14 '14 at 09:58

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 on a table inside a contentEditable div

1 Answers1

Linked