How to make custom tabbing work both in Firefox and IE

One of the issues in the applications having forms is making them work without using the mouse. Thus, it might be required to make it possible for the user to tab in a certain sequence between the form’s elements.

The tabindex property is very useful to this purpose and is supported by both Firefox and IE.

The problem gets a little bit more complicated when dealing with conditional fields, i.e. if a one or more of them gets enabled/disabled depending on a radio button. In this case the tabbing sequence has to change accordingly.

The solution is to use Javascript in order to change the tabindex. But it turned out it might not be that straightforward as there are a few particularities to how Javascript has to change the tabindex in IE.

Firefox is pretty tolerant and would accept most of the common ways of writing the Javascript, while IE has it’s own ways of doing things. Here are my observations:

  1. Use tabindex=’0′ to make an element being skipped to tabbing in all the browsers
  2. When setting the tabindex attribute, use ‘tabIndex’ instead of ‘tabindex’. For example jQuery(field).attr(“tabIndex”, 6);
  3. If there’s a need to preserve the last value of the tabindex with the goal of being restored, one may use something like jQuery(field).attr(“oldTabIndex”, 6). It works.
It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply