我有一个复杂的页面，其中包含多个叠加层（灯箱类型），这些叠加层基于多个下拉菜单中的选择而显示。这是通过jQuery完成的。目标是限制用户只能通过键盘标注覆盖图上的元素（上方定位的灯箱div）。换句话说，从标签序列中删除下面的页面元素。
我知道我可以使用javascript或jQuery在所有下面的元素上设置tabindex =“ - 1”属性，这确实有效，但有一个很大的缺点。
问题是项目可能要求下面的某些元素具有除默认浏览器选项卡索引之外的特定选项卡索引。如果在下面的元素上设置了任何现有的tab索引属性，当我将它们全部设置为“-1”时，我将丢失它们。
所以，我想知道是否有其他方法将标签索引限制为仅重叠div，或者是否有另一种方法我没想过要解决这个问题？任何帮助都将非常感激，因为这个杀了我的制作时间！
这是一个简单的解决方案，不需要全局使用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'的字段。
另一解决方案在使用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;
}
};
$(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重复。