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

我正在开发一个lightbox风格的javascript插件，它会弹出一个带有“下一步+上一步”按钮和“关闭”按钮的图像。我想这样做，标签将只在弹出窗口中的三个按钮之间跳转，而不是通过三个按钮，然后在后台继续页面内容

有人对最好的方法有什么建议吗？目前我认为最好的方法是在弹出窗口出现时创建一个可选项卡元素的数组，然后捕获选项卡以迭代该数组设置，重点关注每个选项卡并防止默认选项卡行为

---

有人知道这方面有什么最佳实践吗？

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

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

JQuery选择器查找div中id为

nonpoup

的所有

A

和

input

元素，并将html属性

disabled

设置为

true

。如果您不使用JQuery，则需要其他方法来查找所有这些元素，但它可能非常简单，如

document.getElementsByTagName（）

---

这样做的目的是防止浏览器切换到这些元素。选项卡顺序仍然会离开页面，并通过浏览器的chrome浏览器，例如URL栏。

一个可能的解决方案似乎是将您不希望被选项卡化的元素的

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>

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

<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>

---

但是，我认为这有点太复杂了。

好的，有关于负tabindex功能的文档。它似乎是由MS介绍的，参见例如。FF也支持它，请参见例如。将tabindex设置为负值会使文档在所有HTML 4样式中无效，但在XHTML 1.0和HTML 5中有效。

<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>