internet-exploreraccessibilityfreezetabbing

Internet Explorer hangs when holding in space and tabbing through a form

Internet explorer seems to be hang after you tab through form inputs while holding in spacebar

to illustrate the problem I've setup a really simple form with 3 checkboxes. http://inkistudios.com/tests/checkbox.html

if you press tab until you get to a checkbox input. try holding in spacebar as if you would toggle the checkbox using your keyboard. but then press tab to switch to another checkbox before releasing the spacebar. this seems to cause Internet explorer to hang , you cannot drag the window around , and clicking on anything on the page seems to check/uncheck the checkbox you tabbed out of. so Internet Explorer seems to still be waiting for spacebar to be released on the first checkbox... I tried this in Internet Explorer 7, 8 and 9, all seems to have the same result.

I was wondering if anybody has a solution for this. maybe some javascript that would force the browser to release the state it is in ?

I've already tried unfocusing the element or putting focus on another element using jquery in case that happens , but nothing I've tried seems to solve it.

Solution

  • I was able to reproduce this behavior using two versions of IE:

    Clicking the title bar of the window toggled the checkbox, in addition to being able to click anywhere in the page. I found that it releases the window as soon as you press space again.

    This looks like a bug in how IE handles focus. Since the window releases as soon as space is pressed again, I thought maybe it would be possible to write JavaScript to simulate a space bar press. Here's the script I worked out based on your test case:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="none">
    <meta name="viewport" content="width=960">

    <title>checkbox test</title>

</head>
<body>

<h1>Checkbox test</h1>

<input name="item1" id="item1" value="1" checked="checked" type="checkbox" />
<label for="item1">item1</label><br />

<input name="item2" id="item2" value="2" checked="checked" type="checkbox" />
<label for="item2">item2</label><br />

<input name="item3" id="item3" value="3" type="checkbox" />
<label for="item3">item3</label>

<script>
<!--
var spaceDown = false;
var tabDown = false;

window.onload = function(){
    document.onkeydown = function(){
        if(event.keyCode == 32){ spaceDown = true; }
        if(event.keyCode == 9){ tabDown = true; }
    }

    document.onkeyup = function(){
        if(spaceDown && tabDown){
            console.log("Danger, Will Fobinson!");
            console.log("Simulating space bar press ...");
            var e = document.createEventObject();
            e.altKey = false;
            e.ctrlKey = false;
            e.shiftKey = false;
            e.keyCode = 32;

            document.fireEvent("onkeydown", e);
            document.fireEvent("onkeyup", e);
        }

        if(event.keyCode == 32){ spaceDown = false; }
        if(event.keyCode == 9){ tabDown = false; }
    }
}



// -->
</script>

</body>
</html>

    Unfortunately, when you trigger the danger condition in IE 8 (focus a checkbox, space down, tab down), it increases IE's CPU usage a LOT and pops up a little dialog box saying:

    Dialog box saying: 'stack overflow at line: 0'

    So that's not very helpful.

    And as you discovered, the focus() and blur() methods don't seem to do anything helpful in this instance either.

    So basically, I think your only option is to report it as a bug to the IE team, and hope they fix it. I'm not sure how you do that actually. In theory you can submit IE feedback at http://connect.microsoft.com/IE -- but you'll need to log in with a Windows Live ID, and I'm not sure how you get one of those.

    Other than that ... well, let's just hope that not too many people trigger the bug!