加载新页面时检查是否已按下键 (JavaScript)

Question

我目前正在构建一个网站，该网站通过 JavaScript 使用自定义快速导航。

如果用户按右键，他将被导航到我的页面列表中的下一页，并且通过按 ALT + 右键或左键，他可以在浏览器历史记录中向前和向后导航。

这是我当前的代码：

var map = [];

    window.onkeydown = window.onkeyup = function(e){
        e = e || event; // to deal with IE
        map[e.keyCode] = e.type == 'keydown';

        if (map[18] && map[39]) { // ALT + Right
            window.history.forward();
        }
        else if (map[18] && map[37]) { // ALT + Left
            window.history.back();
        }
        else if (map[39]) { // Right Key
            window.location.href = "{{ path('sctn_findsong') }}";
        }
        if (map[38]){ // Up Key
            //
        }
        if (map[40]){ // Down Key
            //
        }
    }

一切正常，除了一个小问题：假设我想返回三页 - 如果我是一个有逻辑思维的人，我会先按 ALT + Left 返回一个站点，然后当我在上一个站点时，只需按住 ALT 并按 Left再次取回一个站点。但是，当我返回一个站点并按住 ALT 时，它不会记录 ALT 仍处于按下状态，因此每次我到达上一个站点时都必须再次按 ALT，这非常烦人。我如何让它按照我想要的方式工作？帮助表示赞赏。

Answer 1

您应该查找 e.altKey==true 以查看 alt 键是否按下

var map = [];

window.onkeydown = window.onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';

    if(e.altKey==true){ // ALT down
    if (map[39]) { //  + Right
        window.history.forward();
        //console.log("forward");
    }
    else if (map[37]) { //  + Left
        window.history.back();
        //console.log("back");
    }
    }


    else if (map[39]) { // Right Key
        window.location.href = "{{ path('sctn_findsong') }}";
    }
    if (map[38]){ // Up Key
        //
    }
    if (map[40]){ // Down Key
        //
    }
}

Answer 2

这是不可能的。您需要一个事件 "keyup" 或 "keydown" 才能在新页面加载后知道您的 ALT 键的状态。但是，例如，您可以将状态（布尔值向下或向上）存储在 localStorage 中。加载新页面时，您可以读取该值。但是，这可能不可靠，特别是如果您在页面加载期间（在加载页面之前）释放键。此外，您还需要在加载的每个页面中包含处理 keyevents/localStorage 的 javascript。

您是否考虑过更改 Web 应用程序的设计，以便通过异步 (ajax) 请求加载页面内容？这样您实际上不会离开主页并且可以跟踪触发的事件。缺点是您需要创建自己的 "history"，因为从浏览器的角度来看您实际上并没有离开页面。做到这一点的一个好方法是利用 window.location.hash.

Answer 3

如果您不想使用 AJAX

，您可以将页面加载到 IFRAME

加载新页面时检查是否已按下键 (JavaScript)

Check if key is already pressed when loading new page (JavaScript)

javascript

jquery

keypress

keylistener

keydown