3

我已经定义了以下两个 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/

4

3 回答 3

3

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

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

于 2014-08-12T14:21:40.543 回答
1

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

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

于 2013-09-16T20:37:51.960 回答
0

您可以尝试使用新的window.getSelection()API，通过它您可以访问作为当前选择的一部分的最叶节点。IE：

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

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

于 2020-08-09T23:00:11.693 回答