Microsoft Edge-Keydown事件

2022-07-14 00:00:00 microsoft-edge javascript

我想使用箭头(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键)获得焦点。尽管我不确定这到底是一个多大的问题。

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

 <input autofocus>

Edge似乎尊重这一点，并为元素提供自动焦点，您的Key Down事件现在将触发。遗憾的是，你不能只是隐藏这个元素，因为如果它被隐藏了，它就不再能自动对焦了。(也许您可以将其不透明度设置为0)，但我没有尝试。

在这两个选项中，我更喜欢解决方法1。如果今天下午有机会，我会将此作为错误提交给Edge团队。

相关文章