Question

我已经定义了以下两个span元素： 1）一个可信的div内的元素。 2）满足要素。

到目前为止，我无法为我的第一个案例（）获取onkey事件。对于不在可信任的div中的第二个（），这些事件可以解决。

有人知道为什么吗？

以下是示例代码：

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

http://jsfiddle.net/nr9HG/

Answer 1

因为span1不是满足的，所以它不会触发任何事件。

您也可以在子级上设置contenteditable，但不会触发，因为包装contenteditable div editor会捕获内部跨度之前的事件，因此不会对子span1触发它们。

所以你可以改变你的代码：

<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/

旁注：我认为最好在标记中显示contenteditable的布尔值

Answer 2

我遇到了同样的问题，如果你将可编辑的范围放在另一个不可编辑的范围内，它似乎有效：

<div id="editor" contenteditable="true">div contents...
    <span contenteditable="false>
        <span id='span1' contenteditable="true" style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
    </span>
</div>

您将能够在编辑器div和span1中捕获keydown / keyup事件。

编辑：您需要内部跨度来关注来自它的keydown事件。使用DOM方法.focus（）来执行此操作。

Answer 3

您可以尝试使用新的window.getSelection() API，通过该API您可以访问当前选择的最叶节点。即：

<div contenteditable onkeyup="getTarget">
   <span id="1">One</span>
   <span id="2">Two</span>
</div>

JS：

function getTarget(ev) {
   const selection = window.getSelection();
   // assuming your cursor is over "One"
   console.log(selection.baseNode.parentNode) // <span id="1"></span>
}

可能符合或可能不符合您的要求。

onkeyup，onkeydown事件没有为SPAN元素触发

3 个答案: