Question

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

<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元素但重点是转向地址栏。使用下面的样式

来隐藏.dialog开始和结束锚标签

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

我不确定锚样式是否是原因，或者是确保焦点位于对话框内的唯一方法是获取可聚焦元素列表并在容器上的keydown事件处理程序中调用focus（）方法。

Answer 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功能）

Answer 2

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

捕获模式对话框的焦点

2 个答案: