Microsoft Edge-Keydown事件-前端问题

Microsoft Edge - keydown event(Microsoft Edge-Keydown事件)

本文介绍了Microsoft Edge-Keydown事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用箭头(37个向左箭头，39个向右箭头)在页面之间切换。下面的代码可以在Firefox、Chrome和Internet Explorer上正常运行。在浏览器中单击后退(返回浏览历史记录)按钮后，解决方案不适用于Microsoft Edge。有人知道如何修复它吗？

<script type="text/javascript">

window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(event) {

    var x = event.which || event.keyCode;

    if (x == 37) { window.location.href = "page1.html";}
    if (x == 39) { window.location.href = "page2.html";} 
};

</script>

推荐答案

这看起来像是错误。因为当您使用导航控件(或刷新按钮)时，窗口似乎失去了焦点，因此不会触发按键事件。同样，Window.Focus似乎也没有像预期的那样工作。

但我找到了一个(或两个)解决方法。第一种方法是将您的脚本修改为如下所示：

    <script>        
    window.onload = function(){
        document.body.focus();
        document.addEventListener("keydown", checkKeyPressed, false);

        function checkKeyPressed(event) {

            var x = event.which || event.keyCode;

            if (x == 37) { window.location.href = "page1.html"; }
            if (x == 39) { window.location.href = "page2.html"; }
        };            
    }
</script>

然后需要将制表符索引添加到正文标记中，例如：

<body tabindex="1">

这允许您以编程方式设置页面的焦点(Microsoft Edge不会像window.fox()那样忽略它)。您需要将tabindex添加到正文的原因是因为Focus方法隐式地适用于有限的元素集，主要是form和<a href>标记。在最近的浏览器版本中，通过显式设置元素的tabindex属性，可以将事件扩展为包括所有元素类型。

此解决方法确实会增加一个潜在的辅助功能问题，因为您的元素可以通过键盘命令(如Tab键)获得焦点。尽管我不确定这到底是一个多大的问题。

第二个选项是向页面添加一个表单元素，然后手动将焦点设置为该元素或添加自动聚焦属性：