javascript - 使用 Tab 键在对话框元素内循环在 Safari 和 Chrome 中不起作用

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 中的一个错误(可用性)

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

如果我添加带有可见文本的 anchor 标记，它也可以在 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/