How to Get tabIndex to Work Properly in IE

tabIndex allows you to define a specific tab order of objects in a swf. This is especially helpful when designing forms with input fields. Upon reaching the final object in the tab order the cursor is supposed to go back to the first tabIndex. As you might imagine this works properly in Firefox. As you might also imagine, it does not work properly in IE.

Instead of wrapping back to the first object, IE takes the client out of the swf and into the address bar, or other objects on the page unrelated to the swf where your form fields reside. You can see an example here: http://www.rabidgadfly.com/swf/tabhack.html .

The good news is that there’s a relatively simple hack to prevent IE from wrestling tab control away from your swf. The trick is to create an empty movie clip and assign it the last tabIndex. Then attach an onSetFocus to it that hands focus back to the first object in your tab order. The code looks like this:


input1.tabIndex = 1;
input2.tabIndex = 2;
input3.tabIndex = 3;
restartTab_mc.tabIndex = 4;

restartTab_mc.onSetFocus = function() {
	Selection.setFocus(input1);
};

You can try out the fix here: http://www.rabidgadfly.com/swf/tabhack2.html, or download the fla to take a look .

-rG

3 thoughts on “How to Get tabIndex to Work Properly in IE

  1. Good tip! Don’t forget if you want to set tabIndex for objects inside a movieclip you’ll need to set the tabChildren property of the movieclip itself to true:

    my_mc.tabChildren = true;

    my_mc.textField1.tabIndex = 2;
    my_mc2.textField1.tabIndex = 3;

    for example…

    I struggled for a long time looking for the solution to tab indexes in nested movieclips so just thought I post it here in case anyone needed it.

Comments are closed.