0

I am trying to create a tab focus in my site. Every time the user hits the tab key the focus moves to the next item on the page.

This works out the box in ie (version 9 and 8 tested) but in FF it only works on form elements.

Can I get this working more universally using jquery?

Thanks.

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
LeBlaireau
  • 17,133
  • 33
  • 112
  • 192
  • 1
    Only WebKit browsers and/or OS X ones have this behaviour by default, and it can be switched to "tabbing through form elements and links" as on any other browser. What is your exact configuration for tests? – FelipeAls Jun 06 '12 at 15:10
  • Check this thread: http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed – ckaufman Jun 06 '12 at 15:24

2 Answers2

1

Give everything you want tabbable the attribute tabindex="0"

Example:

<b tabindex="0">Tabbable Title</b> 
<p tabindex="0">My tabbable content</p>
<div tabindex="0" style='height: 100px; width: 100px; border: 1px solid red;'></div>

DEMO Here, just click on the 'Tabbable Title' text and press TAB to go forward and Shift+TAB to go back through the elements.

This will tab through each element in the order they appear on the page. You can also specify your own tab order by giving the tabindex a number other than 0, it will tab from 1 to 2 to 3 etc.

Timm
  • 12,553
  • 4
  • 31
  • 43
  • Why would you use non-focusable elements and then render them focusable with tabindex attribute when form elements and LINKS are already focusable in every browser? – FelipeAls Jun 07 '12 at 08:36
  • Because that was the question, "Can I get this working more universally". – Timm Jun 07 '12 at 09:11
  • It already works universally... (modulo an option on WebKit I believe, and we had no news about that from OP). – FelipeAls Jun 08 '12 at 08:05
  • OP: "in FF it only works on form elements", so _not_ universally. I'm not sure what you're getting at here! – Timm Jun 08 '12 at 08:42
-1

Yes you can. Using jQuery, you can use:

$(function() {            
    if($.browser.mozilla) 
        $('*').attr('tabindex', 0);
});
Ardy Dedase
  • 1,088
  • 9
  • 15
  • 1
    You really want to make div.clear (and other elements void of information) focusable or is the universal selector here only as an example? Did you observe a similar behaviour than OP did when focusing with Firefox in the first place? – FelipeAls Jun 07 '12 at 08:39