javascript - 将按键和焦点事件附加到 contenteditable div 内的元素

Question

我想将 keypress 和 focusout 事件处理程序附加到 contenteditable div 内的段落。

以下代码似乎不起作用:

<div contenteditable="true">
    <p id="p1">Test</p>
    <p id="p2">Test</p>
    <p id="p3">Test</p>
</div>

$('#p1').bind('keypress', function(e) {
    alert('keypress');
});

$('#p1').focusout(function(e) {
    alert('focusout');
});

JSFiddle

Answer 1

基本上，contenteditable 将响应从内部节点分派(dispatch)的事件。如果我们获得插入符号位置并定位它的范围的父节点 - 那么我们就可以检索所需的 ID

$('[contenteditable]').on('keypress focusout', function(ev) {
  var node = window.getSelection().getRangeAt(0).commonAncestorContainer;
  var nodeParent = node.parentNode;
  
  // Do something if parent node ID is "p1"
  if( nodeParent.id === "p1") {
    console.log( nodeParent.id +' '+ ev.type ); // or whatever you need to do here
  }
});

<div contenteditable="true">
   <p id="p1">TestP1 do someting on keypress</p>
   <p id="p2">TestP2 is Not Interesting</p>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>