使用tab键在Safari和Chrome中不工作的对话框元素内循环

Looping inside dialog box elements using tab key not working in Safari and Chrome

本文关键字：工作 对话框 元素 循环 键在 tab Safari Chrome 使用      更新时间：2023-09-26

我有一个弹出对话框，有按钮和输入字段，可以通过选项卡导航。一旦焦点到达最后一个元素，我想将焦点返回到对话框的第一个元素。我不希望焦点离开对话框。我知道它可以使用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/

但是我想在不向用户显示任何不需要的元素的情况下进行导航。

是否有其他解决方法?

你可以用opacity: 0;制作你的最后一个元素

这将使它不可见，并将与您当前的jQuery脚本工作

你还应该知道，如果你想让你的a设置焦点，它需要一些文本:

HTML: 

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

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

Demo: http://jsfiddle.net/EPjsE/

相关文章：