javascript 如何将选项卡索引限制为仅覆盖及其元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11351983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit tab indexes to just an overlay and its elements
提问by user1505068
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.
我有一个复杂的页面，其中包含多个叠加层（灯箱类型），这些叠加层基于多个下拉菜单中的选择而出现。这是使用 jQuery 完成的。目标是限制用户只能通过键盘浏览叠加层（位于灯箱 div 上方）上的元素。换句话说，从选项卡序列中删除下面的页面元素。
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.
我知道我可以使用 javascript 或 jQuery 在下面的所有元素上设置 tabindex="-1" 属性，这确实有效，但有一个很大的缺点。
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".
问题是该项目可能要求下面的某些元素具有除默认浏览器选项卡索引之外的特定选项卡索引。如果在下面的元素上设置了任何现有的选项卡索引属性，当我将它们全部设置为“-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!
所以，我想知道是否有其他方法可以将选项卡索引限制为覆盖 div，或者是否有另一种方法我没有想过解决这个问题？任何帮助将不胜感激，因为这会浪费我的制作时间！
回答by user1505068
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.
这里有一个简单的解决方案，不需要全局使用tabindex。（使用jQuery）。我在 Firefox、Chrome、Safari、Opera 和 IE9、IE8 和 IE7 中检查过它。似乎运作良好。
function tabFocusRestrictor(lastItem,firstItem){
$(lastItem).blur(function(){
$(firstItem).focus();
});
}
tabFocusRestrictor('#clsButton','#firstItemInSequence');
tabFocusRestrictor('#clsButton','#firstItemInSequence');
so the html input fields on the overlay would roughly look like:
因此叠加层上的 html 输入字段大致如下所示：
<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'.
这允许按钮像往常一样运行，除了模糊时，例如当您离开按钮时，它会将您带到指定的输入字段，在这种情况下，该字段的 ID 为“firstItemInSequence”。
回答by Salva GS
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.
另一种解决方案。在 tabIndex = maxindex 的控件中按下 TAB 键后，此函数将焦点放在 id = controlID 的控件上。这将通过按 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;
}
};
回答by spirytus
I think jQUery plugin I created would do what you need:
我认为我创建的 jQUEry 插件可以满足您的需求：
https://github.com/spirytoos/TABGuard
https://github.com/spirytoos/TABGuard
I hope it helps
我希望它有帮助
回答by Code Spy
$(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 10which is last Tabindex in Div and Selector_With_Where_Tab_Index_You_Wantis the class or ID of div In which you want tabindexto repeat.
setTabindexLimit()函数两个属性10是 Div 中的最后一个 Tabindex 和Selector_With_Where_Tab_Index_You_Want是要在其中重复 tabindex 的 div 的类或 ID。
