Question

我在模态窗口中有一个页面，我正在显示幻灯片。目标受众群体适用于平板电脑用户，他们可以通过从右向左或向左滑动来浏览节目，以查看下一张或上一张幻灯片。这一切都很美妙。

但是，如果有人使用计算机查看该页面，我希望他们能够使用键盘上的箭头键进行导航。我能够检测到击键，但只有在用户点击模态窗口后才能检测到。我真的希望用户在键盘导航出现之前不必点击任何地方。我尝试的似乎并不重要，这始终是问题所在。

请注意，因为这是一个模态窗口，所以它通过使用iFrame来显示其内容。

这是代码。我已经确认它在页面加载时运行，而pageTurn函数与其他事件一起使用：

document.onkeydown = function(e){   
    if (e == null) {
        keycode = event.keyCode;
    } else {
        keycode = e.which;
    }
    if(keycode == 37){
        pageTurn('right');
    } else if(keycode == 39){
        pageTurn('left');
    }   
};

Answer 1

尝试将事件附加到document.documentElement，而不仅仅是document。

如果失败，请尝试添加document.body.focus()以确保文档已准备好接收键盘输入。

编辑：在iFrame中，该事件需要附加到top.document.documentElement，或者附加到所有框架，如here所述

Answer 2

document适用于附加关键事件。此外，keyCode是所有主要浏览器中keydown和keyup事件的正确属性，因此无需使用which。

要从iframe中附加到父文档，正如您的评论之一所示，您需要使用parent（对于直接父文档的窗口）或top（最外层文档的窗口）：

parent.document.onkeydown = function(e) {
    e = e || parent.event;
    var keyCode = e.keyCode;
    if (keyCode == 37) {
        pageTurn('right');
    } else if (keyCode == 39) {
        pageTurn('left');
    }
};

Answer 3

也许您的密码错误。这是一个显示浏览器代码的页面：http://asquare.net/javascript/tests/KeyCode.html

如果代码正确，请将此页面上的事件处理代码与您的版本进行比较。

JavaScript keyDown不会触发

3 个答案: