javascript - Chrome：在 jquery fadeOut 后恢复文档焦点

Question

我试图有一个可以用键盘键切换的叠加层。但是，一旦我使用淡出隐藏菜单，文档将不会收到我的 keydown 事件，直到我单击窗口。如何使文档获得焦点，以便在淡出完成后直接收听？

<div id="overlay" class="overlay">
    <input type="text" value="test"/>    
</div>

$('#overlay').on('keydown', function() {
    $('#overlay').fadeOut(1000);
    return false;
});

$(document).on('keydown', function() {
   $('#overlay').fadeIn(1000);
    return false;
});

.overlay {
    position: fixed;
    background: black;
    color: white;
    width: 50%;
    height: 100px;
}

另见 jsFiddle

将光标置于输入栏，按一键。它应该在一秒钟内淡出。在该文档没有收到任何按键之后，直到我用鼠标单击它。如何使文档获得焦点，以便我可以只用一个键盘键切换模式？

编辑：在不同的浏览器中测试了小提琴。这个问题似乎是特定于 chrome 的。

Answer 1

淡出叠加层后从文本字段中移除焦点

工作小提琴

$(document).ready(function () {
    $('#overlay').on('keyup', function () {
        $('#overlay').fadeOut(1000);
        $("input[type='text']").blur();
        return false;
    });

    $('body').on('keyup', function () {
        $('#overlay').fadeIn(1000);
        return false;
    });
});