Automatically Setting .swf Object Focus (updated)
Problem: Upon application initialization the DOM has not fully loaded when attempting to set focus on a .swf application window.
Symptom: When the application loads, it is possible to visually confirm that components have focus, however, the application itself does not. As a result, user interaction is required to give the application focus and allow keyboard events within the application.
Use Case: Application presents user with a login view upon application initialization. User expects to simply begin typing to login and not have to click into the application in order to begin.
Solution: Following load completion of the DOM, ensure that the .swf object is given focus and that the object is given a tab index with a value of 0, in order to place it first in the tab order.
Browsers Tested: Internet Explorer 8.0, FireFox 3.6, Safari 5.0, Chrome 12.0
Browser Test Failed: Chrome 12.0 ( See issue #27868 )
Applying the solution is incredibly simple and requires only the addition of a single method and associated call on the body’s onLoad event. This solution is just a bit of JavaScript added to the application’s index-template.html file. As an aside, I have not experienced success in solving this issue using the ExternalInterface.call() approach from within the creationComplete or applicationComplete event handlers of the Flex application.
Edit: Thanks to Tim (see comments) for providing information about CallBacks in swfobject 2.2+ and for the lead on setting wmode parameter!
In order to get Chrome 12 to behave as expected and allow initialized focus on the .swf application, it is necessary to assign the wmode parameter in your html-template JavaScript (at this time, it appears that only values of ‘opaque’ and ‘transparent’ apply to this solution).
params.wmode = "opaque";
Write a method to set focus on your application, {swf} is the variable which contains the name of your application and is used within the settings of the index-template file. The method simply sets focus on the .swf application and sets its tabIndex property to 0
<script type="text/javascript">
function getAppFocus()
{
document.getElementById ( '${swf}' ).tabIndex = 0;
document.getElementById ( '${swf}' ).focus();
{
</script>
Call the method from the body’s onLoad event.
<body onLoad = "getAppFocus();">
The expected resulting behavior is that your .swf application will have focus, not requiring any user interaction with window in order to have keyboard events registered, allowing them to begin typing into a form control immediately.
Loading ...
I discovered this workaround a couple of days ago too.
Just a heads up but there seems to be a bug in Chrome 12 on Windows where it fails to set focus unless the wmode is set to ‘opaque’ or ‘transparent’. This doesn’t seem to affect OSX or Android (GoogleTV).
Unfortunately this is a less than ideal situation if you wish to use an alternate wmode or have failed to specify one at all.
In my current situation I wished to use wmode=’direct’ to allow access to the new StageVideo hardware acceleration however when using this wmode you are again left with an inability to set focus. If anyone know’s a work around please let me know.
Also if you’re using swfObject 2.2 or later you can use the built in optional CallBack Function param which triggers automatically after the swf has been embedded (and obviously after the DOM is ready) e.g.
var flashvars = {};
var params = {};
var attributes = {
id: "exampleFlash"
};
swfobject.embedSWF("example.swf", "DivID", "550", "400", "10.0.0", "flash/expressInstall.swf", flashvars, params, attributes, onFlashReady);
function onFlashReady(e) {
var f = swfobject.getObjectById('exampleFlash');
f.tabIndex = 0;
f.focus();
}
Hey Tim, thanks for the heads up and the pointer to swfobject 2.2+ CallBack. Have you been able to get initial focus in Chrome 12 at all…on any platform? I will experiment with wmode tomorrow and see if Chrome responds any differently. Everything I’ve found in the Chrome issues has led me to believe that this is a Chrome bug. Initially I had resolved that this is a WebKit-centric issue, but having been able to get Safari to behave today I’m left with Chrome. I’m wondering if its going to take waiting for an update that includes a fix.
I too assumed it was a Webkit issue however it seems isolated to Chrome 12.
Yes I have it currently working using the swfobject method from my previous post in Chrome 12 on OSX (Snow Leopard) and also Google TV (Android) using wmode=’direct’. I haven’t tested other wmode’s on those systems however I’ll run some tests tomorrow.
I can get it working on Windows 7 using wmode=’opaque’ or wmode=’transparent’ but none of the other wmode’s work.
Hey Doug, random question but how do you get your blog posts listed on flashbookmarks.com? Do you require a specific WordPress plugin? My blog is listed in the right hand list but my posts never make it into the feed.
Thanks for the tips,
BTW, it doesn’t work on Firefox 4 too
And neither on FF5
@Florian – in your environment, did you set wmode parameter in html-template?
@Tim – setting wmode worked for getting focus in chrome, I added edit above – thanks for the input for bettering the solution!
As for flashbookmarks….nothing that I’ve done other than blog on flex stuff and get aggregated – It might be from mxna (feeds.adobe.com).
It seems that
params.wmode = “opaque”; and other changes
set it working for chrome and safari, but for me opera is still not in focus, PS3 browser also do not set in focus… I try http://youtube.com/leanback and see it is in focus anywhere, but their JS is hard to read, any ideas how they make it work?
@Stanislav – Leanback didn’t work for me in Chrome 12 on Mac
GOD BLESS YOU!!! actually for this row:
params.wmode = “opaque”;
without this anything is useless! )