Detect keyup event of contenteditable child whose parent is a contenteditable div

12
votes

Goal: Attach a keydown event handler to a contenteditable span that is the child of a contenteditable div.

Problem: If you type in the span the parent event is triggered not the childs. What I want is the child to trigger so I can grab the text. I only want THAT contenteditable child as there will be many.

HTML/JS is below and the fiddle link is here: http://jsfiddle.net/aBYpt/4/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span class="child" contenteditable="true">First child span text.</span>
    <span class="child" contenteditable="true">Second child span text.</span>
    <span class="child" contenteditable="true">Third child span text.</span>
</div>

<div id="console"></div>

JavaScript/jQuery

$(document).on( 'keyup', '.parent', function() {
    $('#console').html( 'Parent keyup event fired.' );
    //do stuff
});

$(document).on( 'keyup', '.child', function() {
    $('#console').html( 'Child keyup event fired.' );
    //do stuff
});

**Note: Event handling is delegated to document because elements are dynamically added.

1
javascriptjqueryhtmlcontenteditable
review this (may be what you're after): stackoverflow.com/questions/1164213/… – Duncan
I just found this one which I think is more relevant: stackoverflow.com/questions/5072164/… , seems like a hack tho... I think this is a bug. – Joshua Robinson

1 Answers

9
votes

So this is a bug. Workaround confirmed for FF23 and CHROME29 (on linux with no vm so can't test IE). You must set the wrapping spans as contenteditable false, you can't just omit declaring the contenteditable attribute, which is rediculous. Solution via Keypress event on nested content editable (jQuery)

Here is the fiddle: http://jsfiddle.net/aBYpt/14/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span contenteditable="false">
        <span class="child" contenteditable="true">First child span text.</span>
    <span contenteditable="false">
        <span class="child" contenteditable="true">Second child span text.</span>
    </span>
</div>

<div id="console"></div>

JavaScript/jQuery

$(document).on( 'keyup', '.parent', function() {
    //do stuff
    $('#console').html( 'Parent keyup event fired.' );
});

$(document).on( 'keyup', '.child', function(e) {
    //do stuff
    $('#console').html( 'Child keyup event fired.' );
    e.stopPropagation();
});