如何将选项卡索引限制为仅覆盖及其元素答案

【问题标题】：How to limit tab indexes to just an overlay and its elements如何将选项卡索引限制为仅覆盖及其元素
【发布时间】：2012-07-05 20:19:01
【问题描述】：

我有一个复杂的页面，其中包含多个叠加层（灯箱类型），这些叠加层是基于从几个下拉菜单中的选择而出现的。这是用 jQuery 完成的。目标是限制用户只能通过键盘在覆盖层（定位的灯箱 div 上方）上的元素之间切换。换句话说，从标签序列中删除下面的页面元素。

我知道我可以使用 javascript 或 jQuery 在下面的所有元素上设置 tabindex="-1" 属性，这确实有效，但有一个很大的缺点。

问题是该项目可能要求下面的某些元素具有特定的选项卡索引，而不是默认的浏览器选项卡索引。如果在下面的元素上设置了任何现有的选项卡索引属性，当我将它们全部设置为“-1”时，我将丢失它们。

所以，我想知道是否有其他方法可以将选项卡索引限制为仅覆盖 div，或者是否有其他我没有想到的方法来解决这个问题？任何帮助将不胜感激，因为这会浪费我的制作时间！

【问题讨论】：

看看我的回答here。

标签： javascript indexing tabs popup overlay

【解决方案1】：

这里有一个简单的解决方案，不需要全局使用tabindex。（使用 jQuery）。我在 Firefox、Chrome、Safari、Opera 和 IE9、IE8 和 IE7 中检查过它。看起来效果不错。

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

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

所以叠加层上的 html 输入字段大致如下所示：

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

这允许按钮正常工作，除了模糊，例如当您关闭按钮时，它会将您带到指定的输入字段，在这种情况下，具有 'firstItemInSequence 的 id '。

【讨论】：

该 blur 事件不仅会为 tab 触发，最好处理 tab keydown 事件并检查您是否在第一个/最后一个控件上。请参阅gist.github.com/0d04646ab6cf4df50610 中的第 23-83 和 143-153 行
记得放入相关控件以进行向后导航。这适用于向前导航，但不适用于 shift-tab 导航。相同的代码。
非常好的解决方案。但 Joshua 是对的：向前和向后骑自行车是最重要的。

【解决方案2】：

另一种解决方案。在 tabIndex = maxindex 的控件中按下 TAB 键后，此函数将焦点放在 id = controlID 的控件上。这将通过按 TAB 产生一个圆周运动。

它将位于：

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

【讨论】：

【解决方案3】：

我认为我创建的 jQUery 插件可以满足您的需求：

https://github.com/spirytoos/TABGuard

希望对你有帮助

【讨论】：

【解决方案4】：

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() 函数两个属性10是Div中的最后一个Tabindex，Selector_With_Where_Tab_Index_You_Want是你想要的div的类或ID tabindex 重复。

【讨论】：