contentEditable div 내의 테이블에 keydown

Question

dom에 contentEditable 인 div가 있고 그 div 안에 테이블이 들어 있습니다.

<div contentEditable> 

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

나는 td 값을 편집 할 수 있습니다.

그러나 그 테이블 (또는 td)에 keydown 이벤트 listner를 첨부하면 이벤트가 트리거되지 않습니다. keydown은 contentEditable div에서만 트리거됩니다.

table (또는 td)에서 keydown 이벤트를 듣지 만 contentEditable div는 수신하지 않는 방법은 무엇입니까?

Answer 1

포커스를받을 수있는 요소 (예 : 입력 및 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="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>