javascript - 输入模糊后无法获得焦点返回到 div

Question

我完全被这件事难住了。这就是我想要做的：我有一个 div 元素（调用它#keys），我用它来处理按键事件。

HTML：

<div id="#keys" tabindex="1">Focus</div>

JS：

$('#keys').keydown(function () {
    $('#log').append('*'); // just note that an event happened
});

这按预期工作——只要#keys专注，我就可以接收按键事件并做出响应。此外，我可以将焦点设置到其他 div 元素，按键事件将不再由#keys. 然后我可以重新聚焦 div（例如，通过直接单击它，或者通过响应click另一个 DOM 元素上的事件）并且按键事件按我预期的方式处理。

到目前为止，一切都很好。我遇到的问题是，如果我聚焦一个输入元素，然后尝试#keys通过设置一个blur在离开输入后激活的处理程序来重新聚焦，则#keysdiv 不会收到焦点！如果我通过单击模糊输入，它可以正常工作，但如果我使用键盘则不行。

$('#input').blur(function () {
    $('#log').append('blur'); // note that a blur happened
    $('#keys').focus();
});

我认为这个问题的本质是，为什么我的blur处理程序在#input离开输入时似乎不能正常工作（但在点击离开时它确实工作正常）？这只是浏览器的怪癖吗？（我在 Mac OS 上使用 Chrome 30.0.1599.101。）

这是我关于 JS 的第一个 SO 问题，所以请让我知道我可以提供哪些额外的细节来描述这种情况。

（编辑：有趣的是，如果我将制表符移开，它似乎工作正常#input。仍然对这里发生的事情感到困惑；似乎是某种与 tabindex 相关的问题？）

score 4 · Accepted Answer

我还没有评论权限，所以我必须回答，但请mods应该改变这个，因为它基本上是重复的。

这是你的小提琴的修复：http: //jsfiddle.net/NsRyr/3/

问题（如this answer中所述）是模糊事件在更改完成之前触发，因此需要将焦点向下发送到堆栈以在之后发生。添加计时器可以解决此问题。

我更改的行是：

setTimeout($('#keys').focus.bind($('#keys')), 0);

这使得它会等到新的焦点事件完成后再触发处理程序。

1 回答 1