Table of Contents

theField.tabIndex

Description

The integer tabIndex property specifies theField's position in the custom tab order. When no text field, clip, or button has a tabIndex property defined, Flash determines tab order automatically and pressing the Tab key moves focus between buttons and input text fields from right to left, then top to bottom. We use the tabIndex property to force Tab key navigation to follow our own sequence, overriding the automatic order. For example, a custom tab order can change a two-column table of input text fields from "row-by-row" to "column-by-column" navigation. Or, it can completely curtail keyboard access to an input text field, movie clip, or button.

To create a custom tab order, we assign an integer tabIndex priority to each object that we want tab-accessible. At each frame rendering, ActionScript creates the tab order dynamically, according to the priorities set for any objects currently displayed. Flow moves from lowest to highest number, so when the Tab key is pressed, the object with tabIndex 1 is focused first, followed by tabIndex 2, and so on. Objects with _visible set to false are not included in the tab order.

Here we create four text fields in a two-by-two grid; then we force the tab order to flow right-to-left up the grid, one row at a time (this is the reverse of the automatic order):

// Create the fields
this.createTextField("row1col1_txt", 1, 40, 70, 100, 20);
row1col1_txt.border = true;
row1col1_txt.type = "input";
this.createTextField("row1col2_txt", 2, 150, 70, 100, 20);
row1col2_txt.border = true;
row1col2_txt.type = "input";
this.createTextField("row2col1_txt", 3, 40, 100, 100, 20);
row2col1_txt.border = true;
row2col1_txt.type = "input";
this.createTextField("row2col2_txt", 4, 150, 100, 100, 20);
row2col2_txt.border = true;
row2col2_txt.type = "input";
// Assign custom tab order
row2col2_txt.tabIndex = 1;
row2col1_txt.tabIndex = 2;
row1col2_txt.tabIndex = 3;
row1col1_txt.tabIndex = 4;

When at least one object has tabIndex set, any objects without an assigned tabIndex cannot be accessed via the Tab key. Note that tabIndex affects only text fields with type set to "input". By default, input text fields are tab-enabled, so the tabEnabled property needs to be set (to false) only to exclude an instance from the tab order while retaining its tabIndex value.

Usage

The Tab key does not work reliably in Test Movie mode unless Control Disable Keyboard Shortcuts is enabled. Be sure to test keyboard behavior in the Standalone Player, if applicable, and in the Flash Player for all targeted web browsers.

See Also

Button.tabIndex, MovieClip.tabIndex, TextField.tabEnabled, TextField.type

Table of Contents