Events On Children Of Contenteditable Element

I have myDiv.bind('keypress', '> *', function(event) { console.log('keypress') }); but it does not seem to work. myDiv is contenteditable and I am trying to get access to p el

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

Solution 2:

The issue may not be the selector, but rather that the <div id="test"> is always the event.target.

$('#test').on('keypress', function (e) {
    console.log(e.target);
});

With this, at least in Chrome, the console just logs:

<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
...

Solution 3:

Keypress event will bubble up to the container element, so you don't necessarily need bind to the children. Instead bind only to the container, than you can check which element was edited by accessing to the event.target property.

$('#container').on('keypress', function (event) { alert(event.target) });