使用Tab鍵在對話框元素內循環使用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不起作用。這似乎是一個bug（可用性）WebKit中

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/