How to set tabindex in nested Components

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

How to set tabindex in nested Components

jtuchel
Hi,

I'm sure this has been answered over and over again, but I cannot find it.

Most web sites use a banner, sidebar, toolbar and whatever components. The standard behaviour of browsers is to start the tabbing index with the first tag drawn on the page. This is most likely the banner or something else, but most of the times it is not the component that contains the current form that a user should fill in on this page.

So what do people do to always set the cursor to the first input element of a form that is nested somewhere deep in the WAComponent-hierarchy.

I can think of a few options, most of which do involve some javascript.

For example:
** Make sure the input element that should have focus when the page is opened has some class (or maybe id) and use jquery/javascript to focus() it when the document is loaded. But what if I have two or three components on my page, and multiple of them have such an element?
**Write a javascript that simply looks for the first input element and focus it. IN many cases, that one is not the right one (maybe it is the search input field in the banner).
**Write a javascript that finds the first form (or a form with a certain class assigned to it) and focus() its first input element
**Extend the render canvas to assign tabindexes starting with 1 for each render cycle

None of these sound very attractive to me and have their drawbacks.

So how do people handle this problem? It can be very annoying to have to tab through the whole battery of links on top of the page before you get to the first input field...

Joachim