How to change the form input tabbing order

html twitter-bootstrap tabindex
Max picture Max · May 31, 2012 · Viewed 12.1k times · Source

I'm using Boostrap on a simple sign-up form and I'd like to setup the order of the tabbing order. It currently skips the "Sign up" button.

I did added tabindex="1" for each input field (e.g. 2, 3, etc.), including the submit button, but it doesn't works.

Here's a jsFiddle.

It seems to work in Opera, but not in Safari or Chrome. Any work-arounds?

UPDATE: Works in Chrome, Opera, but not Safari.

Answer

James Allardice picture James Allardice · May 31, 2012

There is nothing wrong with your code. I would expect that to work in all browsers. However...

The prevention of this seems to be a "feature" in Safari. You have to enable tabbing to anything other than text inputs. Here's a screenshot from my Safari 5 preferences window:

enter image description here

If I check that box, your fiddle works fine. It also seems to work if I press alt + tab (on Mac... not sure about Windows since alt + tab would switch to another window).

Related questions

vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More
Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More