How to limit tab indexes to just an overlay and its elements

Question

I have a complex page with several overlays (lightbox type) that appear based on selections from several drop down menus. This is done with jQuery. The goal is to limit the user to only be able to tab through the elements on the overlay (above positioned lightbox div) via the keyboard. In other words, remove the below lying page elements from the tab sequence.

I am aware that I can set tabindex="-1" attributes on all of the below lying elements using javascript or jQuery, which does work, but with one big drawback.

The problem is that the project might require that some of the below lying elements have specific tab indexes other than the default browser tab index. If there were any existing tab index attributes set on the below lying elements, I will lose them when I set them all to "-1".

So, I am wondering if there is some other way to limit the tab indexing to just the overlay div, or if there is another approach I have not thought of to resolve this? Any help would be greatly appreciated as this one is killing my production time!

Answer 1

Here is a simple solution to the problem that does not require the global use of tabindex. (using jQuery). I checked it in Firefox, Chrome, Safari, Opera and IE9,IE8 and IE7. Seems to work well.

function tabFocusRestrictor(lastItem,firstItem){
    $(lastItem).blur(function(){
        $(firstItem).focus();
    });
}

tabFocusRestrictor('#clsButton','#firstItemInSequence');

so the html input fields on the overlay would roughly look like:

<form>
  <input type="text" id="firstItemInSequence" />
  <input type="text" id="secondItemInSequence" />
  <input type="text" id="thirdItemInSequence" />
  <button id="clsButton">close</button>
</form>

This allows the button to function as it normally would, except on blur, such as when you tab off of the button, then it takes you to the designated input field, in this case the one that has the id of 'firstItemInSequence'.