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

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!

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.

Share Improve this question edited Aug 26, 2019 at 11:08 Vadim Kotov 8,2848 gold badges50 silver badges63 bronze badges asked Jul 5, 2012 at 20:19 user1505068 2211 gold badge2 silver badges7 bronze badges

Check out my answer here. – canon Commented Mar 21, 2016 at 18:55

Add a comment |

3 Answers 3

Sorted by: Reset to default 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'.

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;
    }
};

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to limit tab indexes to just an overlay and its elements - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)