javascript - Chrome : Recover document focus after 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;
}

See jsFiddle also

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

编辑:在不同的浏览器中测试了 fiddle 。这个问题似乎是 Chrome 特有的。

Answer 1

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

Working Fiddle

$(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;
    });
});