Submit button not focused even though tabindex is

Question

I have defined tab index for the input fields in a form. When tabbing through the input fields the submit button is never getting the focus, some other input fields in a different form on the page gets the focus. Those are all having tab indexes higher than 3. How come?

<form action="subscription.php" name="subscribe" method="post"  onsubmit="return isValidEmailAndEqual()">
<p id="formlabel">E-mail</p> <input type="text" name="email1" tabindex=1>

<br/>
<p id="formlabel">Repeat e-mail</p> <input type="text" name="email2" tabindex=2> <br/>
<input id="inputsubmit" type="submit" value="Subscribe" tabindex=3>
</form>

CSS:

input {
    background-color : #333;
    border: 1px solid #EEE;
    color: #EEE;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 1px;
    width : 200px;
}

#inputsubmit {
    background-color : #d7e6f1;
    border: 1px solid #EEE;
    color: #0000ff;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 1px;
    width : 200px;
}

#inputsubmit:hover {
    cursor: pointer; cursor: hand;  
    background-color : #d7e6f1;
    border: 1px solid #0000ff;
    color: #0000ff;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 1px;
    width : 200px;
}

p#formlabel{
    width: 100;
}

Answer 1

This is a Mac OS X issue. Your Mac may be configured to not allow you to tab to non-textfield elements (e.g., buttons). You can change this by going into system preferences for keyboard. Then click on the shorcut tab and look at the bottom and choose the option to allow focus on all controls. You should now be able to focus on the buttons on Safari and Firefox in addition to all buttons in Mac OS.

To quickly change the setting on your Mac, press CTRL + F7 (or if you're using a Mac Keyboard, try holding down the Function Key and pressing CTRL + F7).

Answer 2

Ok, let's see. I have tried above code in Firefox (Mac, Windows), Safari (Mac) and IE (Windows). Here are my findings:

When using

<button name="thename" type="submit">Subscribe</button>

or

<input id=\"inputsubmit\" type=\"submit\" value=\"Subscribe\">

for submitting the form (same result):

• FF (Win) - When tabbing, the focus does hit the button
• FF (Mac) - When tabbing, the focus is not hitting the button.
• Safari (Mac) - When tabbing, the focus is not hitting the button.
• IE (Win) - When tabbing, the button seems to be in some kind of focus all the time and the button will have some extra focus when tabbing to i.
• For all, when an item inside the form has the focus it's possible to just hit enter in order to "click" the submit button.

I guess the conclusion has to be like this:

1. Different browsers behave differently. Even the same browser behaves differently on different OS (FF).

2. The default behaviour of a form is that hitting enter will submit the form using the first submit button in the form.

3. I think it's a pitty that the focus wont hit the button when tabbing because I think that quite a lot of users expect the focus on the item before hitting enter.

Or what do you say...?

Answer 3

It's a Mac 'feature' to only let you tab thought input boxes and lists by default. Tabbing through all controls is an advanced option:

http://support.mozilla.com/en-US/kb/Pressing+Tab+key+does+not+select+menus+or+buttons

Firefox on Mac copies this default OS behavior.

Answer 4

You don't have to define tab indexes, you might as well give them up -- unless you want to modify the natural order of them when they get sorted by their creation. Try taking them out altogether and see if it works more to your liking.