Flash steals browser focus

Question

I have a flash app in my page, and when a user interacts with the flash app, the browser/html/javascript stops receiving keyboard input.

For example, in Firefox control-t no longer opens a new tab.

However, if I click on part of the page that isn't flash, the browser starts receiving these events again.

Is there anyway to programatically (either through flash or javascript) to return focus to the browser?

After the user clicks a button in flash, I have the flash executing a javascript callback, so I've tried giving focus to a form field (and to the body) through javascript, but that approach doesn't seem to be working.

A perhaps more concrete example is Youtube. They also have this problem. When I click the play/pause button, or adjust the volume, I would expect my browser keyboard controls to still work, but they don't, I have to click somewhere on the page outside the movie area. This is the exact problem I'm trying to solve.

Answer 1

You can use the ExternalInterface class within Flash to call JavaScript. For example you could set up a function on an interval (Event.ENTER_FRAME for example) to call the JavaScript function that @Diodeus mentioned:

document.body.focus();

Or, an even better solution would be to add an event listener to the flash root (stage) to listen for when the mouse leaves Flash. You can set up this event to move focus to the document.body.

AS3

package {
   import flash.display.*;
   import flash.events.*;
   import flash.external.ExternalInterface;

    public class TestMouseLeave extends Sprite
    {
        public function TestMouseLeave()
        {
            // Add event listener for when the mouse LEAVES FLASH
            addEventListener(MouseEvent.MOUSE_OUT, onMouseLeave);
        }

        private function onMouseLeave(ev:Event):void
        {
            var jslink = new ExternalInterface();
            jslink.call("changeFocus");
        }
    }

}

Javascript on your page:

<script type="text/javascript" language="javascript">
    function changeFocus(){
        document.body.focus();
    }
</script>

Let me know if you want an AS2 example, and I'll post it up.

Wanted to make a note about this solution: Once you push focus back to the browser, you will require that the user click on the Flash plug-in again to activate user input inside the flash plug-in. This could be a jarring user experience, and is something to consider when using this solution.