控制弹出 javascript 小部件上下文中的选项卡焦点

Question

我正在开发一个灯箱风格的 javascript 插件，它会弹出一个带有下一个+上一个按钮和关闭按钮的图像。我想做到这一点，以便选项卡只会在弹出窗口中显示的三个按钮之间跳转，而不是经过其中三个按钮，然后继续在后台的页面内容上。

有没有人对执行此操作的最佳方法有任何建议，目前我认为最好的方法是在弹出窗口出现时制作一组可选项卡元素，然后捕获选项卡以迭代该数组设置重点关注每个元素并防止默认选项卡行为。

有人知道这方面是否有任何最佳实践吗？

Answer 1

一个可能的解决方案似乎是将您不希望可选项卡的元素的 tabindex 属性设置为 -1。

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" tabindex="-1"/>
    <input type="button" value="also not tabbable" tabindex="-1"/>
</div>

尽管到目前为止我没有在任何文档中找到它，但它似乎适用于所有经过测试的浏览器（FF 3.5、IE 6 & 7、Opera 9.64）。

另一种方法是当不需要的元素获得焦点时使用 blur() ：

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur()"/>
    <input type="button" value="also not tabbable" onfocus="blur()"/>
</div>

这种方法的缺点是，一旦您点击“不可选项”元素，就不会选择任何元素并选择下一个选项卡将从第一个元素开始。当向后切换时，这尤其棘手，这已经不可能了。解决这个问题的方法是积极关注正确的以下元素：

<div>
    <input id="firstTabbable" type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
    <input id="lastTabbable" type="button" value="tabbable three" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/>
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/>
</div>

但是，在我看来，这有点太复杂了。

Answer 2

我在显示弹出窗口时尝试执行以下操作，它似乎在 Firefox 3 中工作。这可能足以让您开始：

$('#nonpopup a').attr('disabled','true');
$('#nonpopup input').attr('disabled','true');

JQuery 选择器找到所有 A 和 input 位于 div 中 id 为 nonpopup 的元素，并将 html 属性 disabled 设置为 true。如果您不使用 JQuery，则需要其他方法来查找所有这些元素，但它可能像 document.getElementsByTagName() 一样简单。

这样做的目的是防止浏览器通过 Tab 键切换到这些元素。 Tab 键顺序仍然离开页面并通过浏览器镶边，例如 URL 栏。