8

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.

Premanshu
  • 616
  • 3
  • 14
  • 24
  • 2
    tabindex="90" without spaces, always " instead of ' –  Jan 20 '12 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 '12 at 11:41
  • 1
    It [works for me](http://jsfiddle.net/e89wK/); 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 '12 at 12:06
  • @wes — Spaces are allowed. Either type of quote is allowed. – Quentin Jan 20 '12 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 '12 at 12:07
  • @Quentin: It seems that as the button is customised, the control is not gettig set on it. The button is wrapped in a table->tr->td structure. And the focus is not supposed to envelope itself on these items(table,span,etc). True! your fiddle reflects the obvious behaviour though. Am using Windows7 in the harmony of Chrome, Mozilla and IE....Thanks again. – Premanshu Jan 20 '12 at 12:16

3 Answers3

15

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).

Ganesa Vijayakumar
  • 2,422
  • 5
  • 28
  • 41
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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 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? – Jukka K. Korpela Jan 20 '12 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 [http://jsfiddle.net/KQt5P/5/]. The code for the button that says Apply Changes is what I got from Chrome Firebug ... – Premanshu Jan 20 '12 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 `` 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. – Jukka K. Korpela Jan 20 '12 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 '12 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.

S.A.Parkhid
  • 2,772
  • 6
  • 28
  • 58
  • 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 '12 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 '12 at 12:05