9

I have few controls on a form. I have to set the tabIndex in an order that is not natural to their order of creation on HTML. There is a button at the fag end and the tabIndex is not getting set (it's never focussed) only on this element.

<button id="btnSave" tabindex = "86" title='click here'>Submit Here</button>

What may be the reasons??

Appreciate your help.

6
  • 2
    tabindex="90" without spaces, always " instead of '
    – user652649
    Jan 20, 2012 at 11:32
  • As a matter of fact that my question has been down voted, i would like to reiterate that i did a thorough check prior to raising this question on SO forum.
    – Premanshu
    Jan 20, 2012 at 11:41
  • 1
    It works for me; you appear to have reduced your test case to the point where it no longer demonstrates the problem. Please edit your code to include enough code to reproduce the problem (backed up with a link to a live example if possible) and describe the environments you are testing in (browsers, operating systems, etc).
    – Quentin
    Jan 20, 2012 at 12:06
  • @wes — Spaces are allowed. Either type of quote is allowed.
    – Quentin
    Jan 20, 2012 at 12:06
  • @Arsen7 — While some browsers are a bit odd about the default type for a button, that would not have any effect on it being focusable or not.
    – Quentin
    Jan 20, 2012 at 12:07

3 Answers 3

16

Tabindex Best Practices

Commonly, I would suggest that do not set Tabindex with any incremental values because for any fields/components in your web page if we follow this rule then we need to maintain the same tabindex incremental values for upcoming fields too and also we mostly show/hide the fields/components based on some conditions so that time the tab index will not work consistently.

I strongly suggest the best practice is that we should not use Tabindex Greater than 0 and use only Tabindex -1 and 0 wherever required

tabindex="-1"

Setting tabindex="-1" allows you to set an element’s focus with the script, but does not put it in the tab order of the page. This is handy when you need to move focus to something you have updated via script or outside of user action.

tabindex="0"

Setting tabindex="0" will take an element and make it focusable. It doesn’t set the element’s position in the tab order, it just allows a user to focus the element in the order determined by its location with the DOM.

tabindex="1" (or any value > 0)

Do not set a tabindex="1" or any value greater than zero (or any positive value).

1
4

If you set tabindex only on the button element, then this element will be the first in navigation, which means that you don’t get to it from the last input field directly (but only via some browser-dependent items in the browser’s own user interface, such as search box and address box). See the HTML 4.01 spec on tabindex.

If you have set tabindex on other fields as well, please post a demo that exhibits the behavior—in a simple test on several browsers, tabindex worked fine when set on all fields.

4
  • So how about the code? Preferably a compact, minimal version that still demonstrates the problem. In another comment, you’re saying that the button uses jQuery. It is quite possible that the problem is related to scripting. How does the page behave if you disable JavaScript in a browser? Jan 20, 2012 at 12:34
  • Actually, the whole stuff uses jquery, so disabling javascript spells disaster for my project. Nothing would come up except a blank screen. I have set the fiddle at [jsfiddle.net/KQt5P/5/]. The code for the button that says Apply Changes is what I got from Chrome Firebug ...
    – Premanshu
    Jan 20, 2012 at 13:08
  • The items in the fiddle are all tabbable except for the “Apply Changes” part. Is that the problem? “Apply Changes” is just text inside a <td> element, so it cannot be focused on. If I set tabindex on it, it becomes tabbable (focusable)—modern browsers let you do that for normal elements too. Jan 20, 2012 at 13:25
  • Ye..That is the problem... The text is on top of the button that i have created. And yes it is becoming tabbale once the tabindex is set on that td. But the button code that the browser generates and the one written by me are different due to the customisation on the button. else by setting the tabindex on the tbody, i would have achieved the result.Alas !!!!
    – Premanshu
    Jan 20, 2012 at 13:47
-2

try :

 <input type="button" value="Sumit here" tabindex="90" />

check that , your index will be counted form zero under it's parrent! index 90 is too much for a html.

2
  • Nopes @Parkhid doesn't help either,...Yeah actually i have set the indexes starting from 50 and incrementing +5 for the next control. For the button now i have set to 86 as my last control has 85. Even then its not of any help. The other controls are text boxes and drop downs
    – Premanshu
    Jan 20, 2012 at 11:41
  • It is a custom buttom using jquery(not a regular HTML button). Can that be a reason behing this unwanted behaviour???
    – Premanshu
    Jan 20, 2012 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.