I have seen a few peeps out there trying to get Form Fields to gain focus in Flex and the blinking cursor to also display in the primary focus field.
Using form_text_field.setFocus(); will get you the halo surrounding the text field but the blinking cursor will not show within the text field as the SWF will not have focus in the browser window.
I achieve swf focus in the browser window in Flex by using oleg's flex template and simply adding the below to the template:
JAVASCRIPT:
-
<script language="Javascript">
-
function Focal() {
-
document.${swf}.focus();
-
}
-
</script>
HTML:
-
<body onLoad="Focal()">
Not tested in IE cos I am on mac FF works fine though.
10 Comments
You can do it without touching html template itself. In Flex simply do something like this:
import flash.external.ExternalInterface;
...
private function doComplete(event:FlexEvent):void {
ExternalInterface.call("s = function() {
document.getElementById('"+this.id+"').focus(); }");
}
place that in main app file.
Nice one Radekg, sweet!
From memory ie7 scrolls to the top of the focused swf (if the page has scrollbars) just a little gotcha
@radekg, very nice solution. I tested it on IE 7 and it worked. but not on FF 2.x.
This technique doesn't work in all cases, due to browser/flash security issues. Flash content shouldn't be able to sniff for keystrokes on a page without being clicked. Think about all those flash ads that could read your password!
I do a similar thing, but use a Javascript mouse over event on the element containing the SWF to set the focus on the flash movie. This gets around the page scrolling you get in IE when the focus is set. It also works nicer if you are using a Mac mouse wheel hack too.
@radekg: Thanks 4 ur solution in Flex. But i wonder if there is any solution in Flash AS2.0 Actually I developed a mobile online application for Flashlite 2.0 . But on browsing I found that the swf file was missing focus so I could not use the mobile keypad with it. If it was with a pc browsing then javascript would have solved the problem, but in mobile i can't use javascript either.
Any one have some idea how to get the swf focused automatically on load???
Thanks for the original article and the tip, radekg! Saved me a lot of time.
radekg, that is an awesome fix. It works in the IDE too. It throw's a security violation if you test locally, but on a server it works like a charm!
Thanks!
W
There is a problem with the "document.${swf}.focus()" approach; if you didn't assign the id/name of your swf the same as the filename/url of your swf in the embed, then it won't be found in the DOM. What you want to do is something like this:
// when embedding the SWF be sure to assign a name to the element
var attributes = {name:"mySwf"};
swfobject.embedSWF("${swf}.swf", "mySwf", "100%", "100%", "9.0.124", "expressInstall.swf", {}, {}, attributes, onEmbedComplete);
// then in the callback grab the swf out of the DOM by name and assign focus to that
function onEmbedComplete() {
var swfHandle = document.getElementsByName("mySwf")[0];
swfHandle.focus();
}
This is a shortened version of what your embed should look like, but it does work on Firefox with swfobject2
One Trackback
[...] Getting a SWF to Gain Focus in Browser Need to test this out. (tags: as3 flex js) [...]