set tabindex for button not working

html button tabindex
Premanshu picture Premanshu · Jan 20, 2012 · Viewed 24.1k times · Source

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.

Answer

Ganesa Vijayakumar picture Ganesa Vijayakumar · Mar 20, 2018

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

Related questions

trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like …

Read More
How to make an input type=button act like a hyperlink and redirect using a get request?

How do I make a <input type=button> act like a hyperlink and redirect using a GET request?

Read More
How to center buttons in Twitter Bootstrap 3?

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I …

Read More