25

状況：

ユーザーがデータを入力できるフォームを含むモーダル ウィンドウ (ライト ボックス) を開く Web ページがあります。ユーザーは通常、キーボードを使用して移動し、あるフィールドから次のフィールドにタブで移動します。

問題：

モーダル ウィンドウが開くと、そのウィンドウだけがアクティブになり、マウスを使用してページの残りの部分にアクセスすることはできませんが、タブでモーダル ウィンドウから出ると要素にアクセスできます。

質問：

タブ ボタンを使用して、フォーム ウィンドウ内の要素のみに移動を制限するにはどうすればよいですか?

私が考えることができる唯一のことはtabindex=-1、モーダルウィンドウが開いているときにJavascriptを使用してすべてのフォーム要素(およびその他のフォーカス可能な要素)を設定しtabindex、モーダルウィンドウが閉じられたときに値を以前の値に戻すことです. より簡単な/より良い方法はありますか?

4

4 に答える 4

4

をキャッチするのはtab-keyどうですか？最後の要素に焦点を当ててから、最初の要素に焦点を当て、その逆も同様ですshift-tab

これは、マルチモードレスダイアログ環境で使用しており、ダイアログでフォーカスを維持し、マウスまたはその他のキーでダイアログを切り替えています

inputs=".editing, input, textarea, button, a, select"
no_tab="[type='hidden'], :disabled"

$focusable=dlg.$form.find(inputs).not(no_tab)


$fa_first=$focusable.first()
$fa_last=$focusable.last()

$fa_last.on("keydown", (evt) =>
    if evt.keyCode==9 && ! evt.shiftKey
        $fa_first.focus()
        evt.preventDefault()
        false
)
$fa_first.on("keydown", (evt) =>
    if evt.keyCode==9 && evt.shiftKey
        $fa_last.focus()
        evt.preventDefault()
        false
)

小さな編集: on "unibind()" (=.off(x).on(x)) 関数を jQuery "on()" で置き換えました

于 2016-06-01T13:16:04.933 に答える
1

jQuery BlockUI Pluginを見てください。2 つのボタンを持つモーダル ボックスを使用した例があり、タブ移動も制限されています。

モーダル ウィンドウですぐに使用できる場合とそうでない場合がありますが、独自の回避策を実装する代わりに、一見の価値があります。

于 2012-02-12T14:52:28.273 に答える
-1

古い投稿ですが、この問題の解決策を探していて、解決するために次のことを行いました。

JQueryを使用して、モーダルウィンドウが開くとすぐに、さまざまなフォームとdivのすべての入力フィールドを無効にしました（モーダルフォーム自体のものを除く）。

$('#formId :input').prop('disabled',true);

モーダル フォームが閉じられると、入力要素を再び有効にすることができます。

ページを「タブ」で移動する場合、無効なフィールドは考慮されません。

于 2013-01-09T19:25:14.257 に答える