CODEWITHSUNDEEP
javascripthtml
Jamie
Jamie

Reputation: 3

Setting tab order with javascript

I have a page which has multiple forms. I'm using Mootools sliding tabs so each of the buttons on the menu slide along to the next form. There are 3 forms which are technically on the same HTML page. See an example of the technique at http://creativepony.com/archive/demos/sliding-tabs/

My problem is when a user presses the tab key and tabs through to the last field I want the tab order so it goes back to the first field. This is so the user does not accidentally tab to the next form. The user would end up looping back around the same form fields. For the user to reach the next form they use the menu so I don't want them to be able to tab to the next form.

I am aware of setting tab order with 'tabindex' but this doesn't help me make the user return to the first field of that form.

Any ideas how to achieve this with javascript?

Upvotes: 0

Views: 2217

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074555

I would do this by making the fields in the forms that aren't visible disabled, so the browser knows to skip them, regardless of navigation mechanism (think accessibility aids).

Upvotes: 2

doque
doque

Reputation: 2733

You can do this via event listeners:

$$(".foo").addEvent("click", function(e) {
  if (e.keyCode == 9) new Event(e).stop();
  $("#myfield").focus();
});

Upvotes: 1

Related Questions