Question

我有一个CONTENTEDITABLE div，在div里面我有一个CONTENTEDITABLE范围，我想要做的是能够在内部SPAN上处理onkeypress事件。

所以，javascript代码将是：

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

HTML内容将是：

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

如果你在浏览器上测试它，当你在某个TEXT上按一个键时，你会看到你不会看到'测试'对话框，我知道问题是在父div中触发了事件，所以SPAN没有得到这个事件，也因为它没有焦点。所以我希望你帮忙找到解决方案。

Answer 1

您在问题中发布的确切代码似乎在http://jsfiddle.net/gaby/TwgkC/3/

处理正常

经过测试并使用 FF ， Opera ， Chrome ， Safari ， IE8 ..

只有更改是删除当前表单中的注释会产生语法错误。

#someid需要关注以使按键起作用如果您希望代码在创建后立即将焦点放在元素上，请使用.focus()方法。

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..
}

<强>更新

处理此问题的两种方法（存在嵌套的contenteditable元素的事实），不确定您的案例是否可以接受但是在这里它们是......

将新contenteditable范围换入另一个范围，该范围设置为contenteditable="false"
（演示： http://jsfiddle.net/gaby/TwgkC/10/）
使#mydiv不成为contenteditable （演示： http://jsfiddle.net/gaby/TwgkC/11/）

Answer 2

最好将keypress事件绑定到#mydiv元素，如下所示：

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

在进一步调查中，似乎DOM元素（例如常规跨度和div）无法获得焦点。但是，您可以通过向每个范围添加tabindex属性来解决此问题。

嵌套内容上的Keypress事件可编辑（jQuery）

2 个答案: