0

我想让模态对话框可访问。我添加了两个隐藏的可聚焦元素 

<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-start{
  height:1px;
  left:-9999px; 
  overflow:hidden;
  position:absolute;
  top:0;
  width:1px;
}

我不确定锚样式是否是原因或确保焦点位于对话框内的唯一方法是获取可聚焦元素列表并在容器上的 keydown 事件处理程序中调用 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 回答
-1 
$(document).ready(function () {
    //set focus on first field in Bootstrap modal when loaded
    $("#yourModal").on('shown.bs.modal', function () {
    $(this).find('#yourField').focus();
    });
});
于 2017-01-26T16:58:31.360 回答