Problem with HTML tabindex

Question

Following is a sample code of which I’m working of. When navigating through ENTER button form submit invokes “Cancel” action though it’s tab index is after the “Next” button.

E.g.

Field01 <ENTER>  Field02 <ENTER>  Field03 <ENTER>   >>>>>  Form submits with Cancel action  
Field01 <TAB>    Field02 <TAB>    Field03 <TAB>     >>>>>  Next button is focused

Changing the order of “submit” buttons in HTML mark-up would help to prevent the invocation of “Cancel” button by default. But I need to keep “Cancel” button in left side & “Next” button in right side.

    <form  method="post" action="/SVRWeb/ActionController" name="frmMain">
        <div>
            <h1>Some information</h1>
            <label>Field 01</label>
            <input type="text" tabindex="0" name="field01" value""  size="15" />
            <label>Field 02</label>
            <input type="text" tabindex="1" name="field02" value""  size="15" />
            <label>Field 03</label>
            <input type="text" tabindex="2" name="field03" value""  size="15" />
        </div>
        <input type="submit" tabindex="4" name="Action.User.Init" value="Cancel" />
        <input type="submit" tabindex="3" name="Action.User.Form2" value="Next"/>
    </form>

As a side note, your first tab index should be 1, not 0.

Emmett
– Emmett

2010-12-06 04:16:35 +00:00
Commented Dec 6, 2010 at 4:16 — Emmett
– Emmett, Commented Dec 6, 2010 at 4:16

BalusC · Accepted Answer · 2010-12-06 04:14:43Z

1

The enter key fires the firstnext type="submit" element in the form, regardless of the tabindex. There are two ways to go around this:

Use JS to click the particular button when enter key is pressed:
```
<form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">
```
This however get nasty when you've a <textarea> in the form for which you of course want to keep its default behaviour with enter key.
Put buttons in same container element with the Next button first and use CSS to swap them.
```
.next { float: right; }
.cancel { float: left; }
```

answered Dec 6, 2010 at 4:14

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The Muffin Man Over a year ago

does the keycode event work in all major browsers? I faintly remember having trouble with this in firefox.

BalusC Over a year ago

@nick: there are indeed browser specific behaviours. Learn more here for the case that you encounter this problem in the future: quirksmode.org/js/keys.html

The Muffin Man · Accepted Answer · 2010-12-06 04:14:40Z

0

I think it is because it see's the Cancel and Next button as the same thing. They are both of type Submit. So when you press enter it finds the first submit button. I would change the cancel type to maybe reset? Then use javascript/jQuery to do a redirect when you click the cancel button.

There may be a better way.

answered Dec 6, 2010 at 4:14

The Muffin Man

20k30 gold badges128 silver badges196 bronze badges

Collectives™ on Stack Overflow

Problem with HTML tabindex

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related