Best Period Picker
copysite.v.3

Online Demo - jQuery TABGuard - jQuery Plugins

TABGuard v1.0 - jQuery plugin

On each press of TAB browser puts tabbable elements in focus and navigates through all the elements in a page. This becomes a problem in a case when you have a form in a dialog (lightbox etc.) and want TAB key to navigate only over elements in this form. Default browser behaviour will iterate over all the elements in a page, this includes these in a form in a dialog, as well as the ones behind the dialog. Furthermore, when no more tabbable elements are available in the page, URL or other elements in browsers chrome will be focussed on.

This plugin limits TAB to certain group of elements only. See example with two groups of fields below. Put one of the fields in focus and hit TAB (or shift+TAB) multiple times. Eventually focus will jump from last to first and vice versa, leaving other group of elements without focus.

1st set of fields :

Some content here. Some content here. Some content here. Some content here. Some content here.









Link 1 | Link 2



2nd set of fields :

Some content here. Some content here. Some content here. Some content here. Some content here.









Link 1 | Link 2



3nd set of fields. Edge case, starting&ending with radio buttons

How to use?

Download jQuery UI (only UI Core/core is needed). When you download it should also come with jQuery in it. Grab it from here:

Download plugin js file:

Full dev. version:

Or minimised:

Include all the files in your webpage. Create HTML with fields and wrap this fields into parent element. Usually its already wrapped in form etc. Once DOM loaded pass parent element into the plugin as below.

$(".someGroup").tabGuard();

You can group elements with any jQuery selector, use class, id, tagname etc. Above I limit TAB scope for one group with class on it.

As simple as that. I did not implement any options as didn't need for the project I currently work on, but in future versions might add features.

See source of this page for very simple example.

Compatibility

I briefly tested on IE7+, latest (as of 23rd May 2013) Chrome and Firefox and see no issues. If you find any problems please let me know via my blog site http://spirytoos.blogspot.com.au.

Safari on windows gets slightly confused when tabbable elements include anchor links so test throughfully if targetting this browser. This possibly has something to do with jQuery UI implementation of :tabbable nevertheless is something to keep in mind.