javascript - jQueryダイアログ内でタブフォーカスを維持する

Question

私は現在 jQuery ダイアログを学習しており、サイド プロジェクトで使用したいと考えています。タブ移動のダイアログの div に tabindex を追加したい。しかし、ダイアログの最後の要素にタブで移動すると、フォーカスが別の場所に移動します。

最後の要素にタブを付けると、フォーカスが最初の要素に戻ります。ダイアログにフォーカスを維持する方法はありますか?

ありがとう！

Answer 1

最後の要素に keypress イベントを追加して、デフォルトのタブ アクションを無視し、ダイアログの最初の要素にフォーカスを戻します。

last_element_id次の例では、最後の要素がで、最初の要素が であると想定していfirst_element_idます。

$('#last_element_id').on('keydown', function(e) {
    if ((e.keyCode || e.which) == 9) {
        $('#first_element_id').focus();    
        e.preventDefault(); 
    } 
});

Answer 2

次のように、スキップしたい要素のタブ移動を無効にします。

$("#element").attr("tabIndex", -1);