Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Tab order in FireFox

1:44 pm on Jul 31, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:May 4, 2004
votes: 0

I have a data entry page on one of my sites that spans over multiple tabs. The tabs are done with hidden absolute positioned divs that appear and disappear based on what tab the user click on.

When I click on the first entry blank after changing tabs, using the tab key does not work correctly to change to the next blank. It puts focus back on the first item on the page. But, it's inconsistant. Sometimes it works, but usually it doesn't.

And, it works perfectly in IE.

Any thoughts?

12:42 am on Aug 1, 2005 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
votes: 6

It is difficult to say without seeing some markup, but I'm not sure that the tabindex is necessarily obliged to move to the next element in the document flow once the active element is rendered hidden. Are we talking about clicking on anchor tags or other elements?
2:00 am on Aug 1, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:May 4, 2004
votes: 0

The page itself is a huge file. 5 tabs, a couple with subsections, and several options lists filled from a database. So I don't think it would be proper to post it. Maybe I can dig out a small subset that'll be enough.

But, I don't know that it has anything to do with being hidden. It seems to be a problem with clicking on a text box.

One tab is contact information, and it's where I notice the problem most often.

Column 1 -
Option list (changing this calls JS to change the address fields that follow - ex: Home, Work, etc)
Address line 1 []
Address line 2 []
City []
State [] (Drop down option list)
Zip []

Column 2 -
Phone description option list (same as address)
Phone Number []
Email description (same as address)
Email []

I have some JS code that uses a XMLHttpRequest object to fetch the city and state based on zipcode, so I often click on the zip code field. But, after typing in the zip code, tabbing out takes focus to the first link on the page which is not in the tab area. It'll do the same with the JS not active, so I don't think that's the problem. Same thing happens if I click on the address line 1 field, enter the data, and tab.

Is it possible that onBlur causes problems? Each of the fields updates a hidden field upon onBlur. But, the problem only occurs when I click in the field, not when I tab into it.

Edit - One thing. After changing tabs, nothing shows as active which I assume means that the active field is hidden.