Question

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

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

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

所以，我想知道是否有其他方法将标签索引限制为仅重叠div，或者是否还有另一种方法我没想过要解决这个问题？任何帮助都会非常感激，因为这会帮助我节省生产时间！

Answer 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>

这允许按钮按常规方式运行，除非模糊，例如当您关闭按钮时，它会将您带到指定的输入字段，在这种情况下是id为'firstItemInSequence的字段”。

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

Answer 3

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

https://github.com/spirytoos/TABGuard

我希望它有所帮助

Answer 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你想要的tabindexto重复。

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

4 个答案: