按键按下事件在点击窗口后才被检测到

Question

在我的Web应用中，我有一个事件监听器来监听打开菜单的按键。只有在我点击页面上的任何地方后才能正常工作。我尝试在窗口加载时添加焦点...但这仍然不会让按键按下功能在我点击页面上的任何地方前运行。

有人知道这是否可能吗？我无法想象不可能，但是我已经尝试过 .focus(); 并没有解决问题。

以下是我的主要功能示例：

    document.addEventListener('DOMContentLoaded', function() {
        // I have tried window.focus(); and window.document.focus(); 
        document.addEventListener('keydown', function(event) {
            var key = event.keyCode;
            if (key == 36) {
                toggleMenu();
                event.preventDefault();
            }
        });
    });

- Spencer May

---

因为浏览器没有焦点？ - epascarello

@epascarello 浏览器应该已经在焦点了。这就是为什么这对我来说是一个如此棘手的问题。 - Spencer May

Answer 1

请查看这个示例：fiddle

使用$(window).focus();（使用jQuery）

编辑： 以下是使用本机JavaScript的解决方案：fiddle

首先，check_focus()函数将在文档没有焦点时聚焦于窗口，然后检测按键。

希望这可以帮助您。

- stark

---

虽然这个可以工作，但我不想为了这一个函数而必须包含一个jQuery库 :/。对于我的问题，一个javascript答案会更好。 - Spencer May

@SpencerMay：请检查我对解决方案的最新编辑，我还添加了使用本地JavaScript的解决方案。 - stark

看起来我的原始答案是有效的。在阅读了你的答案后，我在一个窗口中尝试了它，但仍然不起作用...然后我在Firefox中尝试了一下，它就可以了。我可能有一些Chrome设置关闭了。我还是有点困惑。不过，谢谢你的回答。 - Spencer May

是的，你可能在Chrome浏览器中关闭了JavaScript，这就是为什么它可能无法工作的原因。我看到过一些帖子，人们遇到了这个问题，在某些浏览器上.focus()可以正常工作，但在某些情况下，Chrome或FF的JavaScript设置被关闭了，因为浏览器允许用户允许/禁止脚本聚焦或加载新窗口。 - stark

Answer 2

希望这能有所帮助：

http://jsfiddle.net/yL67u5th/1/

$('#adaw').keydown(function (e) {
    var o = {
        45: 'INSERT',
        46: 'DELETE'
    };

    console.log(e.ctrlKey, e.shiftKey, e.which, o[e.which]);

    $('<div/>', {
        text: (e.ctrlKey ? 'CTRL and ' : '') + (e.shiftKey ? 'SHIFT and ' : '') + (o[e.which] ? o[e.which] : '') + ' was pressed!'
    }).appendTo('#adaw');

});
$('#adaw').focus();    

- Tamer Hatoum