按键事件在SPAN元素中无法触发onkeyup和onkeydown事件

Question

我已经定义了以下两个Span元件： 1) 一个位于可编辑Div内的Span元件。 2) 可以编辑的元素。

到目前为止，我无法使第一种情况（位于可编辑Div内的Span元件）触发onkey事件。但是对于第二种情况（不在可编辑Div内的Span元件），这些事件可以正常触发。

有人知道原因吗？

以下是示例代码：

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

- Aнгел

---

我认为因为span1不是直接可编辑的，所以它不会触发任何事件。 - Irvin Dominin

Answer 1

我有同样的问题，如果您将可编辑的span放在另一个不可编辑的span中，似乎可以解决：

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

你可以在编辑器

和 中捕获按键按下/松开事件。在内部的 要有焦点才能捕获来自它的按键按下事件。使用DOM方法 .focus() 来实现。

- Eliott

Answer 2

因为不是可编辑的内容，所以它不会触发任何事件。 你也可以将contenteditable设置在子元素上，但是它不会被触发，因为包装contenteditable的div editor会在内部的之前捕获事件，所以它们不会在子元素上触发。 所以你可以按照以下方式更改代码:

<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 的布尔值会更好。

- Irvin Dominin

---

谢谢Irvin...但是如果我也需要div“editor”可编辑呢？ 我的应用程序使用div作为容器，用户可以在其中输入任何文本，并对某些关键字进行格式化。例如：当输入“yellow”时，它将将字体颜色设置为黄色。我需要在“yellow”单词更改（即用户删除了“w”字母）时得到通知，以根据需要更新颜色。 那么，考虑到其容器需要是可编辑的，我如何在span元素上获得关于keypress / keyup / keydown的通知？ - Aнгел

Answer 3

你可以尝试使用新的 window.getSelection() 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>
}

可能符合您的要求，也可能不符合。

- nikk wong