关于contenteditable元素的子项的事件 [英] Events on children of contenteditable element

问题描述

我有

myDiv.bind('keypress', '> *', function(event) { console.log('keypress') });

但它似乎不起作用.

myDiv是可编辑的，我正在尝试访问正在编辑的p个元素.

myDiv is contenteditable and I am trying to get access to p elements that are being edited.

http://jsfiddle.net/nb5UA/5/(尝试在创建的div中键入单击Enter后)

http://jsfiddle.net/nb5UA/5/ (try typing within the div created after you click enter)

推荐答案

使用 contenteditable 几乎不可能做到这一点，因为元素不像事件那样保存输入，因此没有真正的焦点，因此您实际上无法确定 event.target . event.target 将始终是具有以下属性的容器 contenteditable="true".

This is barely possible with contenteditable seeing as the elements do not hold input like events and therefore do not have real focus, so you can't actually determine the event.target. The event.target will always be the container that has the attribute contenteditable="true".

不过，您可以使用 DOMCharacterDataModified 事件，例如示例&下面的演示.

However you can use the DOMCharacterDataModified event like the example & demo below.

$('#test').on('DOMCharacterDataModified',  function( event ) {
    if($(event.target).parent().attr('id') === 'test') { // Reference 1 
        alert('modified');
    }
});

演示: http://jsfiddle.net/nb5UA/15/

Demo: http://jsfiddle.net/nb5UA/15/

参考文献1: if 语句正在检查 event.target 是否是#test容器的直接子代.

Reference 1: The if statement is checking that the event.target is a direct child of the #test container.

浏览器对 DOMCharacterDataModified 的支持还不错. <不支持IE9 ，我在活动中找不到太多信息，因此，如果有人有很好的资源，请分享评论.

The browser support for DOMCharacterDataModified is not bad. < IE9 is not supported, and I can't find much info on the event so if anyone has a good resource for it, please share in the comments.

这篇关于关于contenteditable元素的子项的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！