Javascript Microsoft Edge-keydown事件_Javascript_Microsoft Edge

Javascript Microsoft Edge-keydown事件

javascript

Javascript Microsoft Edge-keydown事件,javascript,microsoft-edge,Javascript,Microsoft Edge,我想使用箭头（37-左箭头，39-右箭头）在页面之间切换。下面的代码可以在Firefox、Chrome和Internet Explorer上正常工作在浏览器中单击“后退”（返回浏览历史记录）按钮后，该解决方案不适用于Microsoft Edge。有人知道怎么修吗 <script type="text/javascript"> window.addEventListener("keydown", checkKeyPressed, false); function checkKey

我想使用箭头（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.addEventListener（“向下键”，按checkKeyPressed，false）；
功能检查键按下（事件）{
var x=event.which | | event.keyCode；
如果（x==37）{window.location.href=“page1.html”；}
如果（x==39）{window.location.href=“page2.html”；}
};

这看起来像个bug。在这种情况下，当您使用导航控件（或刷新按钮）时，窗口似乎会失去焦点，因此按键事件不会触发。此外，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>


window.onload=函数（）{
document.body.focus（）；
文档。addEventListener（“向下键”，按checkKeyPressed，false）；
功能检查键按下（事件）{
var x=event.which | | event.keyCode；
如果（x==37）{window.location.href=“page1.html”；}
如果（x==39）{window.location.href=“page2.html”；}
};            
}

然后，您需要向body标记添加选项卡索引，例如：

<body tabindex="1">

这样，您就可以通过编程方式设置页面的焦点（Microsoft Edge-like-window不会忽略它。focus（）是）。您需要将tabindex添加到正文中的原因是，focus方法隐式适用于有限的元素集，主要是表单和

标记。在最近的浏览器版本中，通过显式设置元素的tabindex属性，可以将事件扩展到包括所有元素类型

此解决方法确实添加了一个潜在的可访问性问题，因为您的元素可以通过键盘命令（如Tab键）获得焦点。虽然我不确定这到底是个多大的问题

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

 <input autofocus>

Edge似乎尊重这一点，并为元素提供自动对焦功能，此时将触发按键关闭事件。可悲的是，你不能仅仅隐藏这个元素，因为如果它被隐藏，它将不再获得自动聚焦。（也许你可以设置它的不透明度为0），但我没有尝试

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

在page1.html和page2.html中都有此脚本块吗？单击“上一步”按钮后，焦点是什么？如果它不是

窗口（即“后退”按钮或某些其他边缘组件具有焦点），则您的侦听器将不会收到该事件。@Frode我认为page1.html或page2.html不会阻止脚本，因为从其他页面返回时会出现相同的问题，还有外部站点。请检查此答案：@Paul您知道如何修改此脚本以获得窗口的焦点并使其工作。这是否包括把寡妇放在家里。在什么地方？如果是，那么在哪里？