tabindex=”-1″

posted September 28th 2005 at 1329 EDT in All, Firefox, HTML, IE

This attribute (tabindex) specifies the position of the current element in the tabbing order for the current document. It’s normally a POSITIVE value between 0 and 32767, and when you tab between fields in a html form focus goes sequentially based on the tabindex values.

“0″ is a special value though. When tabindex="0" the browser determines tab ordering based on the order of elements in the source code for a page. (the same thing happens when multiple elements have the same tab order).

“-1″ is also a special value. You might notice however that it isn’t even valid. Some browsers (Internet Explorer and Firefox on a Mac) accept the value “-1″ and elements with that index will not appear anywhere in the tab order of fields. You can not focus on those fields by tabbing from one to the next. This is great for removing extra buttons from the tab order so you can go from one field to the next. It just seems odd that it doesn’t work on Firefox on windows.

Thats great functionality, but it isn’t in the W3C spec

Workaround The workaround is easy. Just set the tabindex to an arbitrarily high number and the element(s) will be at the end of the tab index. Almost as good. It has the slight side affect of making those fields first when tabbing onto the form from the address bar. oh well.

Here is an example form. Try tabbing through in IE and Firefox (on win). The desired effect is to skip over the buttons when tabbing.



(ps if you have inputs on other browsers handle this, please speak up)

Browser support

6 Responses

  1. #1 Elliott
    4 years, 5 months ago

    Camino (Gecko Based) allows the -1 tabindex just like firefox/mac and behaves as you described.

    Safari (and other Webkit browsers tested) seem to place the index of -1 after the highest number. So the tab order of the elements on this page would be (starting from the menubar):

    [menubar] , element 6, 4, 1, 2, 3, 5 and then back around. The order of the negative numbers is from lowest to highest, so a tabindex of -2 would come before a -1 and a -3 before that, and so on.

  2. #2 Eis
    4 years, 2 months ago

    Works in Firefox 1.5/win as described.

  3. #3 barry.b
    4 years, 1 month ago

    It just seems odd that it doesn’t work on Firefox on windows.

    Hmmm..seems to work OK…

    I’m using 1..5.0.1 and “-1″ does get skipped over (4th element)

    the last job I had the taborders were totally dynamic and needed to adjust if it was add or edit, switch across show/hide divs or some other piece of custom “micro-logic”

    “-1″ was a great help…
    just my 2c

  4. #4 pik
    2 years, 4 months ago

    I always used ‘-1′ as described, now I discovered is not allowed in HTML…so I get validation errors on w3c validator…there is no mention of how to reach the same effect…mah..

    tabindex = number [CN]
    This attribute specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32767. User agents should ignore leading zeros.

    http://www.w3.org/TR/html4/interact/forms.html#h-17.11.1

  5. #5 sotec
    2 years ago

    it works in firefox 2.0.0

  6. #6 tefly
    1 year, 8 months ago

    thanks for that. very usefull. i like your capture:

    is glass clear? (yes/no)

    great