タブでナビゲートできるボタンと入力フィールドを持つポップアップダイアログボックスがあります。フォーカスが最後の要素に到達したら、フォーカスをダイアログ ボックスの最初の要素に戻したいと考えています。フォーカスをダイアログ ボックスから離したくありません。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();
});
});
ただし、これは Firefox と IE でのみ機能し、Safari と Chrome では機能しません。これは webkit のバグ (ユーザビリティ) のようです
https://code.google.com/p/chromium/issues/detail?id=168121
表示可能なテキストを含むアンカー タグを追加すると、Webkit でも機能します。
jsfiddle.net/WVDz3/9/
しかし、ユーザーに不要な要素を表示せずにナビゲートしたい.
これに対する回避策はありますか?