I have
myDiv.bind(\'keypress\', \'> *\', function(event) { console.log(\'keypress\') });
but it does not seem to work.
myDiv is
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 theevent.target
. Theevent.target
will always be the container that has the attributecontenteditable="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 theevent.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.
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) });
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>
...