捕获模式对话框的焦点

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开始和结束锚标签被隐藏使用下面的样式

#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);
}

（注意你不再需要qazxsw poi功能了）

Answer 2

onblurevent