javascript - contenteditable 元素的子元素的事件

Question

我有

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

但是好像不行。

myDiv 是 contenteditable，我正在尝试访问正在编辑的 p 元素。

http://jsfiddle.net/nb5UA/5/ (尝试在点击回车后创建的 div 中输入)

Answer 1

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

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/

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

浏览器对 DOMCharacterDataModified 的支持还不错。 不支持，我找不到太多关于该事件的信息，所以如果有人有好的资源，请在评论中分享。