onkeyup、onkeydown 事件未针对 SPAN 元素触发答案

【问题标题】：onkeyup, onkeydown events not firing for SPAN elementonkeyup、onkeydown 事件未针对 SPAN 元素触发
【发布时间】：2013-09-16 20:11:20
【问题描述】：

我定义了以下两个 span 元素： 1) contenteditable div 中的元素。 2) contenteditable 元素。

到目前为止，我无法为我的第一个案例 () 触发 onkey 事件。对于不在 contenteditable 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/

【问题讨论】：

我认为因为 span1 不能直接 contenteditable 所以它不会触发任何事件

标签： javascript event-handling html

【解决方案1】：

我遇到了同样的问题，如果您将可编辑的跨度放在另一个不可编辑的跨度中，它似乎可以工作：

<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() 来做到这一点。

【讨论】：

【解决方案2】：

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

您也可以在 child 上设置 contenteditable，但它不会被触发，因为包装 contenteditable div editor 在内部跨度之前捕获事件，因此它们不会在 child 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 的布尔值

【讨论】：

Thx Irvin... 但是如果我需要 div "editor" 也可以内容编辑怎么办？我的应用程序使用 div 作为容器，用户可以键入任何文本，并在找到某些关键字时对其进行一些格式化。例如：它在键入时将字体颜色设置为黄色到“黄色”字。当“黄色”字发生变化（即用户删除字母“w”）时，我需要得到通知以根据需要更新颜色。那么，考虑到它的容器需要是可内容编辑的，我如何才能在 span 元素上获得关于 keypress/keyup/keydown 的通知？

【解决方案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>
}

可能会或可能不会满足您的要求。

【讨论】：