Microsoft Edge - keydown event

Question

I would like to switch between pages using arrows (37 - left arrow, 39 - right arrow). The code below works correctly with Firefox, Chrome and Internet Explorer.

The solution does not work with Microsoft Edge after Back (back in browsing history) button has been clicked in the browser. 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>

Do you have this script block in both page1.html and page2.html? — Frode, Dec 12 '15 at 15:04
What has focus after you click the back button? If it's not `window` (i.e. the back button or some other Edge component has focus) then your listener won't receive the event. — Paul, Dec 12 '15 at 15:08
@Frode I do not think page1.html or page2.html block the script because there is the same problem when coming back from other pages, also external sites. — Pawel, Dec 12 '15 at 16:06
Check this answer: http://stackoverflow.com/a/1695383/725844 — Frode, Dec 12 '15 at 16:09
@Paul Do you know how to modify this script to get the focus on the window and make it work. Does it involve putting widow. focus() somewhere? If yes then where? — Pawel, Dec 12 '15 at 16:13
Definitely a focus issue. If you add a `load` handler and in there you manually focus on any input element on the page, the navigation starts to work as expected. — Wiktor Zychla, Dec 12 '15 at 18:16
The solution suggested by Wiktor works. Thanks Wiktor. I added an invisible button, got the focus on it and this solved the problem. — Pawel, Dec 13 '15 at 13:15

score 1 · Answer 1 · edited Oct 30 '16 at 21:44

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.

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 e.g:

<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. In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property.

This workaround does add a potential accessibility issue since your element can gain focus via keyboard commands, such as the Tab key. 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:

 <input autofocus>

Edge seems to respect this and gives the element auto focus and your key down events will now fire. 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.

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.

Microsoft Edge - keydown event

1 Answers1

Linked