Microsoft Edge-按键事件

Question

我想使用箭头（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>

Answer 1

这看起来像个错误。 因为当您使用导航控件（或刷新按钮）时，窗口似乎失去了焦点，因此不会触发按键事件。 而且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.focus（）那样忽略它）。需要向主体添加tabindex的原因是因为focus方法隐式适用于元素集有限，主要是形式和<a href>标签。 在最新的浏览器版本中，可以通过显式设置元素的tabindex属性将事件扩展为包括所有元素类型。

由于您的元素可以通过键盘命令（例如Tab键）获得焦点，因此此解决方法确实增加了潜在的可访问性问题。 尽管我不确定到底有多少问题。

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

 <input autofocus>

Edge似乎尊重这一点，并为元素提供了自动聚焦，并且您的按键事件将立即触发。 遗憾的是，您不能只隐藏此元素，因为如果隐藏了该元素，它将不再获得自动聚焦。 （也许您可以将其不透明度设置为0），但是我没有尝试。

在这两个选项中，我更喜欢解决方法1.下午我有机会时，将在连接时将此问题提交给Edge团队的bug。

Microsoft Edge-按键事件

问题描述

1 个解决方案

解决方案1
1 2016-01-05 13:16:03

Microsoft Edge-按键事件

问题描述

1 个解决方案

解决方案1 1 2016-01-05 13:16:03

解决方案1
1 2016-01-05 13:16:03