将 keypress 和 focusout 事件附加到 contenteditable div 内的元素答案

【问题标题】：Attaching keypress and focusout event to elements inside contenteditable div将 keypress 和 focusout 事件附加到 contenteditable div 内的元素
【发布时间】：2014-10-14 05:50:01
【问题描述】：

我想将 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

【问题讨论】：

是的，Regent 打败了我！这是更新的小提琴jsfiddle.net/2r8qy7bL
我想将事件附加到段落而不是 div。会有多个段落，我想用 id p1 监控段落的变化
@mundella 你可以想要它，但由于contenteditable="true"，你将无法做到这一点。请改用多个<div id="pX" contenteditable="true">Test</div>。
@Regent 下次别急着放解决方案。 “你将无法做到这一点”这些话不属于 stackoverflow :)
@mundella 再次重申：您不能使 keypress 和 focusout 事件处理程序对 contenteditable div 中的段落 起作用。 Roko C. Buljan 建议的范围解决方案与事件处理程序一起使用，绑定到<div>（基本上 contenteditable 将响应事件），而不是<p>。这完全是关于你的问题的表述。

标签： javascript jquery html contenteditable

【解决方案1】：

基本上contenteditable 将响应从内部节点调度的事件。如果我们得到插入符号的位置，然后定位它是范围的 parentNode - 我们可以检索所需的 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>

【讨论】：

完美..除了console 中的错字。用 chrome 测试，符合我的目的。 JSFiddle jsfiddle.net/THPmr/183
很好的解决方案！比 SO 中许多类似的、现有的和高度评价的更好！

【解决方案2】：

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

基本上，您需要用非内容可编辑项来包装您的内部内容可编辑项。该事件触发声明 contenteditable=true 的节点。

【讨论】：

【解决方案3】：

我已经更改了解决方案，请参考最新的fiddle

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

【讨论】：

jsfiddle.net/THPmr/173 OP 想要准确定位的任何方式都可能只是在 contenteditable DIV 中的那个可怜的#p1
我想将事件附加到段落而不是 div。会有多个段落，我想用 id p1 监控段落的变化
@mundella 你从一开始就没有提到它，现在这个答案被否决了。一点都不好。
很清楚我想要实现的目标，因为 id 总是在段落中。移动 id 不是解决方案。
@mundella - 不，您在最近的编辑中添加了额外的
标签。无论如何，我会尝试解决这个问题。

【解决方案4】：

您可以按以下方式进行您可以将其更改为要跟踪更改的事件，而不是单击事件。例如，我使用的是单击

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

【讨论】：

类似于段落的绑定事件。
我认为宁可在每个
标签上绑定多个事件，您可以只在

上绑定事件并从中获取
并检查您要添加的进一步逻辑