Keypress event on nested content editable (jQuery)

Question

I have a CONTENTEDITABLE div and inside that div I have a CONTENTEDITABLE span, what I want to do is being able to handle the onkeypress event on the inner SPAN.

So, the javascript code would be:

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});

And the HTML content would be:

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

If you test it on a browser you'll see you won't see the 'test' dialog when you press a key over Some TEXT, I know the problem is that the event is being triggered in the parent div, so the SPAN doesn't get the event, also because it doesn't have the focus. So I'd like your help to find a solution for this.

Could you create an example on [jsfiddle](http://jsfiddle.net) to illustrate the problem? — ArtBIT, Feb 21 '11 at 22:48
AFAIK keypress doesn't bubble through the document (for non-input elements). You could just detect a normal keypress, and check if `#someid` has focus. — zzzzBov, Feb 21 '11 at 22:49
Ok, I realized the example I gave was wrong, I updated the example http://jsfiddle.net/TwgkC/5/ and you can check it doesn't work, it appends the span when any key is pressed on #mydiv, but then the keypress event isn't triggered on the inserted span. — Coder, Feb 21 '11 at 23:09

score 8 · Accepted Answer · edited Mar 14 '16 at 01:55

8

The exact code you posted in your question seems to work just fine at http://jsfiddle.net/gaby/TwgkC/3/

Tested and working with FF, Opera, Chrome, Safari, IE8 ..

only change is the removal of the comment which in its current form creates a syntax error.

The #someid need to have focus in order for the keypress to work.
If you want your code to give focus to the element right after creating it, use the .focus() method.

function AppendSpan()
{
    $('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){
          //do something here
          alert(this.id);
    }).focus();// bring focus to the element once you append it..
}

Update

Two ways to handle this (the fact that there are nested contenteditable elements), not sure if any is acceptable for your case but here they are..

wrap the new contenteditable span in another one, which is set to have contenteditable="false"
(demo: http://jsfiddle.net/gaby/TwgkC/10/)
make #mydiv to not be contenteditable once you add the span..
(demo: http://jsfiddle.net/gaby/TwgkC/11/)

edited Mar 14 '16 at 01:55

esengineer

9,514
7
45
69

answered Feb 21 '11 at 22:57

Gabriele Petrioli

191,379
34
261
317

Ok, I realized the example I gave was wrong, I updated the example http://jsfiddle.net/TwgkC/5/ and you can check it doesn't work, it appends the span when any key is pressed on #mydiv, but then the keypress event isn't triggered on the inserted span. – Coder Feb 21 '11 at 23:09
@coder updated answer to fit the new requirements of the question.. (*better edit the original question to add that `#mydiv` is also `contenteditable`, so we are talking about nested contenteditables*) – Gabriele Petrioli Feb 21 '11 at 23:22
Ok, it's not the ideal solution, but I can work with that, thanks. – Coder Feb 22 '11 at 00:22
so much time wasted... confirmiing that trick with nesting false -> true within true, allows to properly listen on events on nested element with contentEditable set to true thank you :) – mmln May 11 '15 at 14:52

Phil.Wheeler · Answer 2 · 2011-02-21T23:25:32.213

2

You might be better to bind the keypress event to the #mydiv element like this:

$('#mydiv').delegate("span", "keypress", function(){
    console.alert('A key has been pressed: ' + this.id);
});

On further investigation though, it seems that DOM elements such as regular spans and divs are incapable of receiving focus. You may be able to get around this however, by adding a tabindex attribute to each span.

edited Feb 21 '11 at 23:25

answered Feb 21 '11 at 22:49

Phil.Wheeler

16,748
10
99
155

+1: Following your advice, this works: $("#mydiv span").click(function(){ $(this).attr("tabindex",0).focus(); }); Then, the event is passed correctly. Thanks! – lepe Apr 06 '12 at 09:51
Unfortunately the "tabindex" hack only seems to work in Webkit. Another problem is that it requires a click and if you press "right" or "left" key, for example, the focus goes again to its editable parent... – lepe Apr 09 '12 at 00:51

Keypress event on nested content editable (jQuery)

2 Answers2

Linked