javascript - 如何将选项卡索引限制为仅叠加层及其元素

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”的输入字段'.