利用 document.activeElement 获取当前焦点元素

焦点管理的重要性

对于良好的用户体验而言，网站或 Web 应用的可访问性、可用性以及功能完整性都至关重要。

当网站运行流畅且体验良好时，用户往往不会特别察觉；但当体验糟糕时，用户一定能感知到。应用程序可用性和可访问性的一个关键环节是对输入焦点（focus）的处理，然而这往往是开发人员容易忽视的部分。

处理输入焦点不佳的一个典型例子是：点击链接后打开了一个新窗口，但光标并未聚焦到该窗口内的任何元素上。更糟糕的情况是：虽然将焦点聚焦到了模态窗口中的某个元素，但在窗口关闭后，焦点却没有返回到原来的位置。理想的处理方式是：在触发链接时保存一个引用，将光标聚焦到新窗口，并在窗口关闭时将光标重新移回原处。

获取当前焦点元素的方法

那么，如果不知道当前输入光标位于哪个元素上该怎么办呢？我们可以通过 document.activeElement 属性来获取当前文档中获得焦点的元素。

The JavaScript

使用 document.activeElement 来查找当前选中的元素非常简单：

 
var focusedElement = document.activeElement;
/* 比如某个示例:
var triggerElement = document.activeElement;
myModal = new MyModal({
onOpen: function() {
this.container.focus();
}, 
onClose: function() {
triggerElement.focus();
} 
}); 
*/ 

适用范围与优势

这个属性不仅在常规输入元素上可用，包括表单字段或 <a> 标签链接，而且只要设置了 tabIndex 属性的任意元素都是可用的。

我喜欢 document.activeElement 的原因是，不需要使用事件监听或委托监听器来追踪记录下那个元素获得了焦点 —— 您可以随时获取这个属性。 当然在使用这样的特性之前你应该做大量的测试—— 是否在跨浏览器或竞态条件下出什么BUG。 总而言之，我对它很满意，觉得它非常可靠!