11

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

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

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

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

4

4 回答 4

10

这是一个不需要全局使用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”。

于 2012-07-06T15:19:39.440 回答
1

另一种解决方案。在 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;
    }
};
于 2013-01-24T19:44:37.313 回答
1

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

https://github.com/spirytoos/TABGuard

我希望它有帮助

于 2013-05-24T00:10:41.553 回答
0

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是您希望 tabindex 在其中重复的 div 的类或 ID。

于 2014-02-14T16:33:16.537 回答