0

モーダル ダイアログにアクセスできるようにしたかったのです。非表示のフォーカス可能な要素を 2 つ追加しました 

<a href="javascript:void(0)" id="dialog-start">Dialog Start </a>
  Some focussable Dialog Elements  
<a href="javascript:void(0)" id="dialog-end" onblur="onblurevent()">Dialog end</a>


function onblurevent(){
   document.getElementById("dialog-start").focus(); 
}

ダイアログ終了要素のぼかしイベントが発生するたびに、focus()メソッドを呼び出してダイアログ開始要素にフォーカスを移動しようとしましたが、フォーカスはアドレスバーに移動しています.dialog開始および終了アンカータグは、以下のスタイルを使用して非表示にされます

#dialog-start{
  height:1px;
  left:-9999px; 
  overflow:hidden;
  position:absolute;
  top:0;
  width:1px;
}

アンカー スタイルが理由なのか、それともダイアログ内にフォーカスがあることを確認する唯一の方法なのかは、フォーカス可能な要素のリストを取得し、コンテナーのキーダウン イベント ハンドラーで focus() メソッドを呼び出すことであることがわかりません。

4

2 に答える 2

2

keydown イベントを処理しないために問題が発生します。最後のリンク ブラウザを押すTabと、フォーカスがアドレス バーに自動的に切り替わります。したがって、押された場合のpreventDefault()ブラウザの動作をデフォルトにする必要があります。Tab

次のコードが機能します。

window.onload = function() {
    var firstAnchor = document.getElementById("dialog-start"),
        lastAnchor = document.getElementById("dialog-end");

    function keydownHandler(e) {
        var evt = e || window.event;
        var keyCode = evt.which || evt.keyCode;
        if(keyCode === 9) { // TAB pressed
            if(evt.preventDefault) evt.preventDefault();
            else evt.returnValue = false;
            firstAnchor.focus();
        }
    }

    if(lastAnchor.addEventListener) lastAnchor.addEventListener('keydown', keydownHandler, false);
    else if(lastAnchor.attachEvent) lastAnchor.attachEvent('onkeydown', keydownHandler);
}

onblurevent（もう関数は必要ないことに注意してください）

于 2012-11-23T10:22:05.833 に答える