onkeyup，onkeydown事件未触发SPAN元素 [英] onkeyup, onkeydown events not firing for SPAN element
问题描述
我已经定义了以下两个元素：
1）contenteditable div中的元素。
2）contenteditable元素。
I've defined the following two span elements: 1) element inside a contenteditable div. 2) contenteditable element.
到目前为止，我无法让onkey事件触发我的第一个case（）。
对于第二个（）而不在contenteditable div内，这些事件发生罚款。
So far, I can't get the onkey events to fire for my first case (). For the second one () which is not inside a contenteditable div, these events fire fine.
有没有人知道为什么？
以下是示例代码：
<div id='editor' contenteditable>
div contents...
<span id='span1' style="background-color:red" onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
</div>
<span contenteditable id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>
推荐答案
因为 span1 不是一个令人满足的，所以它不会触发任何事件。
Because the span1 is not a contenteditable so it will not fire any event.
你可以设置对孩子也可以内容，但不会被解雇，因为包装可信div 编辑器捕获内部范围之前的事件，因此它们不会在孩子 span1 上触发。
You can set contenteditable on child too, but it will not fired because the wrapping contenteditable div editor catch the events before the inner span, so they are not fired on the child span1.
所以你可以改变你的代码：
So you can change your code in:
<div id='editor' contenteditable="false">div contents...
<span id='span1' contenteditable="true" style="background-color:red" onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
</div>
<span contenteditable="true" id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>
演示： http://jsfiddle.net/IrvinDominin/U8wnK/
旁注：我认为更明显的是可以内容的布尔值在您的标记中
Side note: I think it's better to explicit the boolean value of contenteditable in your markup
这篇关于onkeyup，onkeydown事件未触发SPAN元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
