在popup javascript小部件上下文中控制tabbing键焦点

Question

我正在开发一个灯箱风格的javascript插件，它会弹出一个带有next+previous按钮和关闭按钮的图片。我想让Tab键只在弹出窗口中的三个按钮之间跳转，而不是跳过这三个按钮，然后在后台继续页面内容。

有没有人对最好的方法有什么建议，目前我认为最好的方法是在弹出窗口出现时创建一个标签元素数组，并捕获标签以迭代该数组设置，将焦点放在每个元素上，并防止默认的标签行为。

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

Answer 1

一种可能的解决方案似乎是设置您不希望对-1可用to键的元素的tabindex属性。

<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

当显示弹出窗口时，我尝试了以下操作，它似乎在Firefox3中起作用。这可能足以让你入门：

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

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

这样做的目的是防止浏览器跳转到这些元素。Tab键顺序仍然离开页面，并遍历浏览器chrome，如地址栏。