Microsoft Edge - keydown 事件答案

【问题标题】：Microsoft Edge - keydown eventMicrosoft Edge - keydown 事件
【发布时间】：2016-03-18 09:53:44
【问题描述】：

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

【问题讨论】：

page1.html 和 page2.html 中都有这个脚本块吗？
点击后退按钮后焦点是什么？如果不是window（即后退按钮或其他某些 Edge 组件具有焦点），那么您的侦听器将不会收到该事件。
@Frode 我不认为 page1.html 或 page2.html 会阻止脚本，因为从其他页面以及外部站点返回时也会出现同样的问题。
查看这个答案：stackoverflow.com/a/1695383/725844
@Paul 你知道如何修改这个脚本来获得窗口的焦点并使其工作。是否涉及放寡妇。焦点（）某处？如果是，那么在哪里？

标签： javascript microsoft-edge

【解决方案1】：

这看起来像一个错误。当您使用导航控件（或刷新按钮）时，窗口似乎失去焦点，因此不会触发 keydown 事件。此外 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 团队。

【讨论】：