How to change the form input tabbing order

Question

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.

Solution

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:

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

Comments

[James Allardice]

No problem, glad I could help :) I'm surprised I've never come across this before... I really don't think it's a good feature.