javascript - Tab キーを使用したダイアログ ボックス要素内でのループが Safari および Chrome で機能しない

Question

タブでナビゲートできるボタンと入力フィールドを持つポップアップダイアログボックスがあります。フォーカスが最後の要素に到達したら、フォーカスをダイアログ ボックスの最初の要素に戻したいと考えています。フォーカスをダイアログ ボックスから離したくありません。jquery ui を使用して処理できることはわかっていますが、すでに多くのポップアップを作成しており、jquery ui dialogs を使用しないソリューションが必要です。

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/

しかし、ユーザーに不要な要素を表示せずにナビゲートしたい.

これに対する回避策はありますか?