javascript - contenteditable div 和子跨度上的按键事件

Question

我有一个包含 span 的 contenteditable div，我想在输入 div 本身和 div 中的 span 时跟踪 keydown 事件。

到目前为止，在 Firefox 中似乎一切正常，但在 webkit 浏览器中，div keydown 事件似乎覆盖了 span 事件。有没有办法在 div 内的跨度内触发 keydown？ ( Demo )

HTML:

<div id="ceDiv" contenteditable="true" tabindex="0" onkeydown="return fnKeyDiv(event);">
put your cursor/caret in this contenteditable text and type some characters
or use the arrow keys
-- <span id="ceSpan" tabindex="0" onkeydown="return fnKeySpan(event);">
see what happens when typing inside this yellow text</span>
-- it's not clear to me : counter 2 only works when you click the mouse
inside the yellow text to put the caret there, not when the caret is moved inside
the yellow text by the arrow keys ..
AND : counter 2 does never work in WebKit !? (in FireFox it does)
</div>
<hr />
<span id="ST1" class="ST"></span> : counter 1 : typing in total text<br />
<span id="ST2" class="ST"></span> : counter 2 : typing in yellow "mytext"

---

JS:

var count = 0;
function fnKeyDiv(e) {
    count++;
    document.getElementById('ST1').innerHTML = count;
    return true;
}
function fnKeySpan(e) {
    count++;
    document.getElementById('ST2').innerHTML = count;
    return true;
}

Answer 1

我遇到了同样的问题，它似乎发生了，因为它是 div 元素捕获了 keydown 事件，而不是内部 span 元素。

要让它们捕捉按键按下事件，您需要为每个事件设置 contenteditable=true，同时为 div 容器设置 contenteditable=false。

要使 div 容器和内部 span 都捕获 keydown 事件，您可以将 span 包装在不可编辑的 span 中:

<div id="ceDiv" contenteditable="true" tabindex="0" onkeydown="return fnKeyDiv(event);">
    keydown events here are caught
    <span contenteditable="false">
        <span id="ceSpan" tabindex="0" onkeydown="return fnKeySpan(event);" contenteditable="true" >
            keydown events here are caught too
        </span>
    </span>
</div>

编辑:没关系，当你没有点击最里面的跨度时它仍然不会工作。我不知道如何设置焦点。

编辑:如果您使用 DOM HTMLElementObject.focus() 方法将焦点设置在您的内部跨度上，它就会起作用。我使用的是 jQuery .focus() 方法，它只会触发焦点事件。