捕获模态对话框的焦点答案

【问题标题】：trapping focus for a modal dialog捕获模态对话框的焦点
【发布时间】：2012-11-23 07:15:09
【问题描述】：

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

<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() 方法。

【问题讨论】：

onblurevent() 调用的代码在哪里？拥有它会很有用。
感谢您的帮助。我包含了 onblurevent() 代码以及用于锚标记的样式。

标签： javascript modal-dialog accessibility

【解决方案1】：

出现问题是因为您没有处理 keydown 事件。当您在最后一个链接上按 Tab 时，浏览器会自动将焦点切换到地址栏。因此，如果按下 Tab，您只需 preventDefault() 默认浏览器行为。

以下代码将起作用：

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 函数）

【讨论】：

非常感谢！！它在一个方向上工作正常。如果我使用 shift-tab 向后移动它不起作用。
您应该为第一个链接添加 onfocus 处理程序，该处理程序将立即将焦点移至第一个对话框输入，因此无法使用 shift+tab 在第一个链接上。

【解决方案2】：

$(document).ready(function () {
    //set focus on first field in Bootstrap modal when loaded
    $("#yourModal").on('shown.bs.modal', function () {
    $(this).find('#yourField').focus();
    });
});

【讨论】：