javascript 嵌套内容可编辑 (jQuery) 上的按键事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5072164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keypress event on nested content editable (jQuery)
提问by Coder
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.
我有一个 CONTENTEDITABLE div，在那个 div 里面我有一个 CONTENTEDITABLE 跨度，我想要做的是能够处理内部 SPAN 上的 onkeypress 事件。
So, the javascript code would be:
因此，javascript 代码将是：
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
And the HTML content would be:
HTML 内容将是：
<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.
如果您在浏览器上对其进行测试，您会看到当您在 Some TEXT 上按一个键时不会看到“测试”对话框，我知道问题在于该事件是在父 div 中触发的，因此 SPAN 不会没有得到事件，也是因为它没有焦点。因此，我希望您能帮助找到解决方案。
回答by Gabriele Petrioli
The exact code you posted in your question seems to work just fine at http://jsfiddle.net/gaby/TwgkC/3/
您在问题中发布的确切代码似乎在http://jsfiddle.net/gaby/TwgkC/3/上工作得很好
Tested and working with FF, Opera, Chrome, Safari, IE8..
测试并与FF、Opera、Chrome、Safari、IE8..
only change is the removal of the comment which in its current form creates a syntax error.
唯一的变化是删除了以当前形式创建语法错误的注释。
The #someidneed 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.
在#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..
}
Update
更新
Two ways to handle this (the fact that there are nested contenteditableelements), not sure if any is acceptable for your case but here they are..
处理这个问题的两种方法（存在嵌套contenteditable元素的事实），不确定您的情况是否可以接受，但在这里它们是..
- wrap the new
contenteditablespan in another one, which is set to havecontenteditable="false"
(demo:http://jsfiddle.net/gaby/TwgkC/10/) - make
#mydivto not becontenteditableonce you add the span..
(demo:http://jsfiddle.net/gaby/TwgkC/11/)
- 将新的
contenteditable跨度包装在另一个中，该跨度设置为contenteditable="false"
（演示：http : //jsfiddle.net/gaby/TwgkC/10/） - 令
#mydiv到不会contenteditable，一旦你添加的跨度..
（演示：http://jsfiddle.net/gaby/TwgkC/11/）
回答by Phil.Wheeler
You might be better to bind the keypress event to the #mydiv element like this:
您可能会更好地将按键事件绑定到 #mydiv 元素，如下所示：
$('#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.
但是，在进一步调查中，似乎 DOM 元素（例如常规跨度和 div）无法获得焦点。但是，您可以通过向每个跨度添加 tabindex 属性来解决此问题。
