3

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

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

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

4

2 回答 2

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>

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

于 2009-12-04T09:48:39.160 回答
1

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

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

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

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

于 2009-12-01T14:29:05.880 回答