Recipe3.14.Setting Tab Order

Recipe 3.14. Setting Tab Order

Problem

You want to control the tab order of the elements on a page.

Solution

Use the tabindex attribute of the Struts html tags to sequence the fields:

<html:form action="/SomeAction">   <table>     <tr>       <td><html:text property="field1" tabindex="1"/></td>       <td><html:text property="field4" tabindex="4"/></td>     </tr>     <tr>       <td><html:text property="field2" tabindex="2"/></td>       <td><html:text property="field5" tabindex="5"/></td>     </tr>     <tr>       <td><html:text property="field3" tabindex="3"/></td>       <td><html:text property="field6" tabindex="6"/></td>     </tr>   </table> </html:form>

Discussion

On most most browsers, users can use the Tab and Backtab keys to set the form input fields, buttons, and hyperlinks that have the current focus. By default, the browser changes focus from field to field in the order that the elements appear in the source HTML document. This generally equates to a top-to-bottom, left-to-right sequencing. While this default ordering works fine in most cases, sometimes you need to control the tab ordering manually. Struts provides the tabindex attribute on most tags in the Struts html tag library for manually controlling the ordering. This attribute takes a positive integer value that indicates the sequence of the element.

In the Solution, an HTML table lays out the text fields of the form in a two-column fashion. You want the user to be able to tab down the fields in the first column and then down the fields in the second column. This newspaper-style column interface is more common than you might think. A web page that allows a user to enter a billing address on the left and the shipping address on the right could use such a layout.

The default tab sequencing won't provide the desired navigation. To override the browsers default ordering, the tabindex attribute is used. This attribute is a pass-through attribute to the actual HTML element rendered. In other words, the value of the attribute passes through unaltered to the value of the corresponding attribute of the rendered HTML element. The value for the tabindex should be a non-negative integer. Its value represents the relative tab ordering sequence of the element. The first element in a form might have a tabindex equal to "1," the second field "2," and so forth.

The browser determines the tab sequence of the fields using the tabindex. If an element does not have a tabindex attribute, then its position in the sequence is based on its order in the source document. If the tabindex is 0, the element will be skipped when tabbing. The browser starts navigation with the element that has the lowest nonzero tabindex value. As you press Tab, the browser changes focus to the element with the next highest value.

The tab indices don't have to be sequential; you can skip values.

On a JSP page, the value for the tabindex can be dynamically generated using a scriptlet, or if you are using the Struts-EL libraries, a JSP 2.0 expression. This capability could be used, for example, if you were generating a dynamic set of fields in an iteration loop. A beneficial technique when using tab indices is to use non-sequential values. Instead of using 1, 2, 3, etc., use 5, 10, 15, and so on. With this approach, if you need to add a new field to the page, you won't have to re-sequence the tabindex values for all the elements. Add the field and set the sequence to an unused value so the fields are ordered as desired.