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

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