javascript - 嵌套内容可编辑的按键事件 (jQuery)

Question

我有一个 CONTENTEDITABLE div，在那个 div 里面我有一个 CONTENTEDITABLE span，我想做的是能够处理内部 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>

如果你在浏览器上测试它，你会发现当你在 Some 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 元素)，不确定是否适合您的情况，但它们就在这里..

1. 将新的 contenteditable span 包装在另一个设置为 contenteditable="false"
   (演示: http://jsfiddle.net/gaby/TwgkC/10/ )
2. 添加跨度后，使 #mydiv 不可contenteditable..
   (演示: http://jsfiddle.net/gaby/TwgkC/11/ )