Is it possible to remove read-only field from tab order yet retain style?

I have the following form element on my page:

<input class="readOnlyField" readonly="readonly" type="text"
  name="remLen" size="3" maxlength="3" value="<? echo($remLen); ?>">

The text field is set to be read-only and takes on the style of its class “readOnlyField” as expected. However the field still receives focus when tabbing through the fields on the page using the default tabbing order.

If I change the form element to include


then the field no longer receives focus when tabbing through the page, however the style elements of its class are no longer applied to the field.

Is there a way - perhaps using some function of tabindex - which will allow me to both set the style of the field and prevent it from receiving focus?



Set the tabindex of the read-only form field to a number much higher than any other form fields. Of course, this means you may have to add a tabindex to all of your other form fields. Example:

<input type="text" id="mytext" tabindex="12" />
<input type="text" id="read" readonly="readonly" tabindex="32000" />

You can use any whole number between 0 and 32,767 for tabindex (or some number near that).

Alternatively, you can use some script to blur the field when it receives focus. Something like this example should work:

<input type="text" onfocus="this.blur();" readonly="readonly" />

Thanks Vinnie, but that doesn’t appear to work (at least not in IE6).

The tab order simply jumps to the next highest, so even if the fields are set to tabindex=“0”, tabindex=“1”, tabindex=“32000” they’ll still all receive focus in ascending order.

Not only that, since I’ve added tabindex to all the fields, my tab order seems to have gone completely whacky. The tab order now follows this order:

[list=1][]Field 1 (tabindex=“0”)
]Browser’s address bar
[]Google toolbar
]Field 2 (tabindex=“1”)
[]Field 3 (tabindex=“2”)
]Field 5 (tabindex=“3”)
[]Field 6 (tabindex=“4”)
]Field 4 (tabindex=“32000”)
[/list]Switching the computer on and off and getting a coffee in the meantime may resolve this latest quirk however :wink:


I have also encountered this problem.

One approach is to use script to process clicks on the element you do not want to recieve focus ( and use a span rather than input ).

I haven’t found anything better than that.

Try this:

<input class="readOnlyField" readonly="readonly"..............tabindex="-1">

Add this to your CSS: .readOnlyField {-moz-user-focus:none;…}

Don’t have Opera here at the moment so… :confused: