Events on children of contenteditable element

Question

I have

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

but it does not seem to work.

myDiv is

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

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

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

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.