jquery - jQuery UIダイアログはどのようにしてバックグラウンド入力へのフォーカスを無効にしますか？

Question

jQuery UIを使用してモーダルダイアログを開くと、Tabキーを使用するとダイアログのボタンに焦点を合わせることができますが、ダイアログ外の入力はすべて無視されます。jQuery UI Tools Overlayを使用してこれと同じ動作を実現しようとしていますが、jQueryUIがどのように実行しているかわかりません。要素のタブインデックスを-1に設定しているようには見えません。さらに、ダイアログの一部ではないすべてのフォーカス可能な要素を見つける必要があるため、これを行うのは非常に面倒です。自動化が必要な場合、これはあまり良くありません。一部を除くページのすべての要素のフォーカスを無効にする方法はありますか？

Answer 1

ダイアログウィジェットは実際にkeypressイベントを処理し、独自のTabキー処理を実行します。この処理では、ダイアログ外のタブ可能な要素は無視されます。

関連するソースコード（この投稿の時点での現在のバージョンの286行目から305行目）は次のとおりです。

// prevent tabbing out of modal dialogs
if (options.modal) {
    uiDialog.bind('keypress.ui-dialog', function(event) {
        if (event.keyCode !== $.ui.keyCode.TAB) {
            return;
        }

        var tabbables = $(':tabbable', this),
            first = tabbables.filter(':first'),
            last  = tabbables.filter(':last');

        if (event.target === last[0] && !event.shiftKey) {
            first.focus(1);
            return false;
        } else if (event.target === first[0] && event.shiftKey) {
            last.focus(1);
            return false;
        }
    });
}

TrueBlueAussieのコメントは正しく、ダイアログウィジェットのリリースは間違ったイベントにバインドするために使用されていたことに注意してください。keydownの代わりに使用する必要がありますkeypress：

uiDialog.bind('keydown.ui-dialog', function(event) {
    // ...
});

Answer 2

これを処理するコードのチャンクは次のとおりです。

// prevent tabbing out of modal dialogs
this._on(uiDialog, {
    keydown: function(event) {
        if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) {
            return;
        }
        var tabbables = $(":tabbable", uiDialog),
            first = tabbables.filter(":first"),
            last = tabbables.filter(":last");
        if (event.target === last[0] && !event.shiftKey) {
            first.focus(1);
            return false;
        } else if (event.target === first[0] && event.shiftKey) {
            last.focus(1);
            return false;
        }
    }
});​

jQuery UIが:tabbablejQueryセレクターエンジンにフィルター（）を追加しているように見えます。ダイアログがアクティブな場合、タブはモーダルのタブ可能な要素間でのみ循環できます。

コード：https ：//github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js