TabIndex in HTML

TabIndex is an attribute to HTML elements that tells the browser which control takes focus next when TAB is pressed.

<input id="one" tabindex="3" />

<input id="two" tabindex="1" />

<input id="three" tabindex="2" />

<input id="four" tabindex="4" />

Here, once the page is loaded, the first TAB press will set focus to input two, and then subsequent presses will move the focus to three, one and then four – before returning to two.

In a static web page it can be useful, but in a dynamic page, then this is a truely awful way of moving around.Especially as a web browser will automatically give the controls their own order, naturally in the order that they appear in the HTML source.

So why use it? I have no idea. I have never needed this attribute, and cannot ever see me ever using it.

I’ve just had to remove all the wonky tabindex’s from a huge page. Luckily I use an IDE that lets me search and replace using regular expressions! Online Regular Expression Testing Tool

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>