Question

我想将keypress和focusout个事件处理程序附加到可信的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是响应从内部节点调度的事件的那个。如果我们得到插入位置而不是目标范围的parentNode - 那么我们可以检索所需的ID

＆＃13;

$('[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
  }
});

＆＃13;

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

＆＃13;

Answer 2

这里有一个答案：https://stackoverflow.com/a/18772205/2100255

基本上，你需要用不满足的人来包装你内在的满足者。该事件触发声明contenteditable = true的节点。

Answer 3

我更改了解决方案，请参阅最新的fiddle

$(document).on('keypress', '#p1[contenteditable="true"]', function(e) {
   alert("test");
});

Answer 4

您可以按照以下方式执行此操作您可以将其更改为要跟踪更改的事件，而不是单击事件。我正在使用click例如

＆＃13;

$("div").click(function(e){
    console.log($("#"+$(e.target)[0].id).text());
});

＆＃13;

将keypress和focusout事件附加到contenteditable div中的元素

4 个答案: