[焦点管理]document.activeElement与模态对话框

简介

HTML5增加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得焦点的元素。元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab键）和在代码中调用focus()方法。例如：

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

默认情况下，文档刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

var button = document.getElementById("myButton"); 
button.focus(); 
alert(document.hasFocus()); //true

通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。

查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点，这两个功能最重要的功能用途是提高web应用的无障碍性。无障碍web应用的一个主要标志就是恰当的焦点管理，而确切地知道哪个元素获得了焦点是一个极大的进步，至少我们不用再像过去那样靠猜测了。

浏览器兼容性

最初由IE4作为私有DOM扩展引入的，现在IE 4+、Firefox 3+、Safari 4+、Chrome和Opera 8+都支持。

应用实例

模态对话框的一个重要特点:

• 对话框激活时，焦点应放置在对话框第一个可聚焦元素上；
• 对话框关闭时，应将焦点交还至激活对话框的元素上。

HTML

<a href="#">酱油链接</a>
<button class="btn">open dialog</button>
<button class="btn">open dialog too</button>
<div class="dialog hidden" tabindex='-1'>
    <p>dialog content.</p>
    <button id="dismiss">close dialog</button>
</div>

CSS

.hidden{
    display:none;
}
.dialog {
    position: absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -175px;
    width:350px;
    height:200px;
    background-color:#999;
    box-shadow:3px 3px 3px rgba(0,0,0,0.2), -3px 3px 3px rgba(0,0,0,0.2);
    text-align:center;
}

JQuery

var activeEl;
var dialog = $(".dialog");

function hideDialog(activeEl) {
    dialog.addClass("hidden");
    activeEl.focus();
}

function showDialog() {
    activeEl = document.activeElement;
    dialog.removeClass("hidden").focus();
}

$(".btn").on("click", function () {  
    $(this).focus();
    showDialog();		    
});

$("#dismiss").on("click", function () {  
    hideDialog(activeEl);
});

查看DEMO

REF：JavaScript高级程序设计（第3版）