夕立進行会報

このようなDOM操作でモーダルウィンドウ風の要素を作るときのフォーカス制御の話。 モーダルウィンドウの表示時は、背景を覆うようにスクリーン要素を置いてクリックできないようにすることが多い。しかし背景に<button>や<input>がある場合は、キーボードのtabでフォーカスして操作ができてしまう。それを防ぐ。 focusinイベントをキャッチしてフォーカス制御する フォーカスのイベントにはfocus/blurの他にfocusin/focusoutイベントがある。 focus/blurイベントはバブリング（子要素のイベントが親要素に伝播）しないが、focusin/focusoutイベントはバブリングし、自分自身がフォーカスされない要素でも発生する。 次のようにbodyと#screenにfocusinイベントを設定する。 var isShowDialog = false var focusOnDialog = false document.body.addEventListener("focusin", function(){ //モーダルウィンドウ表示中で、 //フォーカスを取得したのがモーダル上でない場合フォーカスを外す。 if(isShowDialog && !focusOnDialog){ document.activeElement.blur() } focusOnDialog = false; }) document.getEmementById("screen").addEventListener("focusin", function(){ //モーダル上の要素がフォーカスされた focusOnDialog = true; }) //モーダルウィンドウを表示する関数 function showDialog(){ // ～ // 表示の処理 // ～ document.activeElement.blur() isShowDialog = true } モーダルウィンドウの表示中は、フォーカス移動をbodyのfocusinイベント