Question

我有一个弹出对话框，其中包含可以通过选项卡导航的按钮和输入字段。 一旦焦点到达最后一个元素，我想将焦点返回到对话框的第一个元素。我不希望焦点离开对话框。我知道它可以使用jquery ui处理，但我已经创建了很多弹出窗口，我想要一个解决方案没有jquery ui对话框。

我使用jquery实现了一个通用的解决方案。我在对话框的末尾添加了一个没有任何可见文本的元素，当焦点到达这个元素时，我将焦点返回到第一个元素。

<input id="firstElement" type="text"/>
<input type="button" value="Submit"/>
<a id="lastHiddenElement" href="#"/>

$(document).ready(function() {
    $('#lastHiddenElement').focus(function(){
        $('#firstElement').focus();
    });
});

http://jsfiddle.net/WVDz3/7/

但这仅适用于Firefox和IE，并且在Safari和Chrome中无效。这似乎是webkit中的一个bug（可用性）

https://code.google.com/p/chromium/issues/detail?id=168121

如果我添加带有可见文本的锚标记，它也适用于webkit。

jsfiddle.net/WVDz3/9 /

但我想导航而不向用户显示任何不需要的元素。

这有什么变通方法吗？

Answer 1

您可以使用opacity: 0;

制作最后一个元素

这将使其不可见，并将与您当前的jQuery脚本一起使用

您还应该知道，如果您希望将a设置为焦点，则需要一些文字：

HTML：

<a id="lastHiddenElement" href="#">hidden</a>

CSS：

#lastHiddenElement { opacity: 0; width:0; height: 0; }

演示：http://jsfiddle.net/EPjsE/

使用Tab键在Safari和Chrome中无法在对话框元素内部循环

1 个答案: