Question

我正在制作一个灯箱式javascript插件，它会弹出一个带有下一个+上一个按钮和一个关闭按钮的图像。我想这样做，以便tabbing只会在弹出窗口中的三个按钮之间跳转，而不是通过它们中的三个，然后继续在后台的页面内容。

有没有人对最佳方法有任何建议，目前我认为最好的方法是在弹出窗口出现时创建一个tabbable元素数组，然后捕获标签迭代通过该数组设置焦点一，并防止默认选项卡行为。

有人知道是否有关于此的最佳做法？

Answer 1

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

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

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

这实现了阻止浏览器标记到这些元素。选项卡顺序仍然离开页面并遍历浏览器镶边，例如URL栏。

Answer 2

一种可能的解决方案似乎是将您不希望的元素的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＆amp; 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>

然而，在我看来，这有点太复杂了。

控制弹出式javascript小部件上下文中的标签焦点

2 个答案: