Microsoft Edge-按键事件

Question

I would like to switch between pages using arrows (37 - left arrow, 39 - right arrow). 我想使用箭头（37-左箭头，39-右箭头）在页面之间切换。 The code below works correctly with Firefox, Chrome and Internet Explorer. 以下代码可在Firefox，Chrome和Internet Explorer上正常使用。

The solution does not work with Microsoft Edge after Back (back in browsing history) button has been clicked in the browser. 在浏览器中单击“上一步”（返回浏览历史记录）按钮后，该解决方案不适用于Microsoft Edge。 Does anybody know how to fix it? 有人知道如何解决吗？

<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

This looks like a bug. 这看起来像个错误。 In that when you use the navigation controls (or the refresh button) the window seems to lose focus and so keydown events do not fire. 因为当您使用导航控件（或刷新按钮）时，窗口似乎失去了焦点，因此不会触发按键事件。 Also window.focus doesn't seem to work as expected either. 而且window.focus似乎也无法正常工作。

But I have found a workaround (or two). 但是我发现了一种解决方法（或两种）。 The first is to modify your script to look like this: 首先是将脚本修改为如下所示：

    <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>

You then need to add a tab index to the body tag eg: 然后，您需要向主体标签添加一个标签索引，例如：

<body tabindex="1">

This then allows you to programmatically set the focus of the page (And it isn't ignored by Microsoft Edge like window.focus() is) The reason you need to add tabindex to the body is because the focus method is implicitly applicable to a limited set of elements, chiefly form and <a href> tags. 然后，这允许您以编程方式设置页面的焦点（并且Microsoft Edge不会像window.focus（）那样忽略它）。需要向主体添加tabindex的原因是因为focus方法隐式适用于元素集有限，主要是形式和<a href>标签。 In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. 在最新的浏览器版本中，可以通过显式设置元素的tabindex属性将事件扩展为包括所有元素类型。

This workaround does add a potential accessibility issue since your element can gain focus via keyboard commands, such as the Tab key. 由于您的元素可以通过键盘命令（例如Tab键）获得焦点，因此此解决方法确实增加了潜在的可访问性问题。 Although I'm not sure how much of a problem that really is. 尽管我不确定到底有多少问题。

The second option is to add a form element to your page and either manually set focus to it or add the autofocus attribute: 第二个选项是向页面添加表单元素，然后手动为其设置焦点或添加autofocus属性：

 <input autofocus>

Edge seems to respect this and gives the element auto focus and your key down events will now fire. Edge似乎尊重这一点，并为元素提供了自动聚焦，并且您的按键事件将立即触发。 Sadly You can't just hide this element, since if it's hidden it no longer get auto focus. 遗憾的是，您不能只隐藏此元素，因为如果隐藏了该元素，它将不再获得自动聚焦。 (maybe you could set it's opacity to 0) but I didn't try. （也许您可以将其不透明度设置为0），但是我没有尝试。

Of the two options I prefer workaround 1. I will file this as a bug with the Edge team on connect when I get a chance this afternoon. 在这两个选项中，我更喜欢解决方法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