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 elements that are being edited.

/ (try typing within the div created after you click enter)

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 elements that are being edited.

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

• javascript
• jquery

Share Follow edited Aug 11, 2013 at 8:00 iConnor 20.2k1414 gold badges6666 silver badges9797 bronze badges asked Aug 11, 2013 at 7:09 marcopolomarcopolo 2,04544 gold badges1919 silver badges3232 bronze badges 1

• Post a demo. Your code should work. – Blender Commented Aug 11, 2013 at 7:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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/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 ments.

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

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