Javascript 模式对话框的补漏白焦点

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

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

---

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

出现问题是因为您没有处理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

函数）

onblurevent（）调用的代码在哪里？有了它会很有用的。谢谢你的帮助。我包括了onblurevent（）代码以及我用于锚定标记的样式。非常感谢！！它在一个方向上运行良好。如果我使用shift tab向后移动，它将不工作。您应该为第一个链接添加

onfocus

处理程序，它将立即将焦点移动到第一个对话框输入，因此无法在第一个链接上使用shift+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);
}

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