Question

I’m making a large and complex application and I need to set tabindexes to help user navigate through the pages. This is a private application so I don’t have restriction about (ab)using javascript (jquery).

I currently have these questions.

1) How do you force with javascript (jquery) the browser to move the cursor inside a specific textbox as soon as a page has loaded? I noticed that often browsers don’t automatically put the cursor inside the first tabindexed input. I want a surefire way that forces it there no matter what.

2) Some fields that activate ui enanchement (namely jquery ui datepicker) have problems with tabbing (like having to push tab two time to go away from it), is there any way to avoid this?

3) How do you read and set tabindex with jquery? I have some fields that get hidden/shown based on user action and they should be able to “give” their tabindex to other fields if they get hidden, is this a problem, does the browser still consider a tabindex after the page has loaded?

Thank you very muchh

Answer 1

1. To put focus on a specific textbox, do this (assuming textbox id is #firstBox): $('#firstBox').focus(); See more examples here: How do you automatically set the focus…
2. Not particularly because the DatePicker is also its own UI, so it has various objects within it that can be focused on (which is what tabbing picks up on).
3. Actually, now that I’ve thought about it, if you hide a field (AKA, “hidden”) it will not have a tabindex and the other tabs will fall in line with what is defined for the browser (typically top to bottom, left to right order). You shouldn’t have to worry about setting the tabindex manually.