在输入</li>时，从'contenteditable <li>元素中抓住'输入'按钮

Question

我有以下HTML代码：

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

在编辑此元素时单击ENTER键，我想退出编辑模式（将contentEditable设置为false），而不是键入换行符。所以我附上了以下事件列表：

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

问题是虽然它是针对所有其他键触发的，但是没有为ENTER键触发事件。我不明白为什么。我使用的方法与here相同，但它对我不起作用。

Answer 1

您需要绑定到keydown，因为当keypress触发时，事件已经发生：

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

请参阅jsFiddle demo

Answer 2

我今天已经回答了类似的问题here。您必须使用keydown事件。 keypress仅适用于有限的键子集（返回键似乎对我有用，但箭头键不起作用;据我所知，keypress只能对字母数字字符可靠地工作。）