catch 'enter' press from contenteditable <li> element while typing

Question

I have the following HTML code:

<li class="option-item new" contenteditable="true">simple element2</li>

When ENTER key is clicked while editing this element, I want to exit editing mode (set contentEditable to false) instead of typing in line break. So I've attached the following event listner:

$("#ctx-options").on('keypress', '.option-item.new', catch_enter);

The problem is that the event is not triggered for ENTER key, although it is triggered for all other keys. I don't understand why. The same approach that I'm using was suggested here, but it doens't work for me.

Answer 1

You need to bind to keydown, since when keypress has triggered, the event has already occured:

$("#ctx-options").on('keydown', '.option-item.new', function(e) {  
    if(e.keyCode == 13)
    {
        e.preventDefault();
    }
});

Please see the jsFiddle demo

Answer 2

I already answered a similar question today here. You'll have to use the keydown event. keypress will only work for a limited subset of keys (the return key seems to work for me, but the arrow keys do not work; as far as I know, keypress only works reliably for alphanumeric characters).