1

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

如果我添加带有可见文本的锚标记，它也可以在 webkit 中使用。

jsfiddle.net/WVDz3/9/

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

有什么解决方法吗？

4

1 回答 1

1

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

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

您还应该知道，如果您希望自己a专注于焦点，则需要一些文本：

HTML：

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

CSS：

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

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

于 2013-05-07T12:33:23.917 回答