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!

Check out my answer [here](http://stackoverflow.com/questions/5206813/restrict-tabindex-focusing-to-a-section-of-the-page/5206844#5206844). — canon, Mar 21 '16 at 18:55

score 11 · Answer 1 · answered Jul 06 '12 at 15:19

11

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'.

answered Jul 06 '12 at 15:19

user1505068

221
1
2
7

2

that blur event won't only fire for tab, it's better to handle the tab keydown event and check if you're on the first/last control. See lines 23-83 and 143-153 in https://gist.github.com/0d04646ab6cf4df50610 – Sam Hasler Jan 10 '13 at 15:01
4

Remember to put in the relevant controls for backwards navigation. This works for forward navigation, but would fail for shift-tab navigation. Same code though. – Joshua Jun 11 '14 at 15:25
Very nice solution. But Joshua is quite right: cycling forwards as well as backwards is paramount. – Brice Coustillas Jan 15 '17 at 09:33

score 1 · Answer 2 · answered Jan 24 '13 at 19:44

Another solution. This function gives focus to the control with id = controlID after pressing the TAB key in a control with tabIndex = maxindex. This will produce a circular movement by pressing TAB.

It would be situated in :

<body class="body" onkeydown="return onKeyDownTab(event, 7,'txtName');">


function onKeyDownTab(event, maxIndex, controlFocusID)
{

    var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (key == 9)
    {
        try
        {
            if (event.srcElement.id == "" || event.srcElement.className.indexOf("body") > -1)
            {
                document.getElementById(controlFocusID).focus();
                return false;
            }
            if (parseInt(event.srcElement.attributes.tabIndex.value) < 0 || parseInt(event.srcElement.attributes.tabIndex.value) >= maxIndex)
            {
                document.getElementById(controlFocusID).focus();
                return false;
            }
            return key;
        }
        catch (e)
        {
            return false;
        }        
    }
    else
    {
        return key;
    }
};

Code Spy · Answer 3 · 2014-02-15T04:59:06.997

jSFiDDLE

$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

setTabindexLimit() function two attribute 10 which is last Tabindex in Div and Selector_With_Where_Tab_Index_You_Want is the class or ID of div In which you want tabindexto repeat.

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

3 Answers3