如何确定哪个HTML页面元素具有焦点？

Question

有没有一种方法在javascript中确定哪个html页面元素拥有焦点？
可能是重复问题：
如何找出具有焦点的DOM元素？

- Peanut

---

似乎这是一个相关的问题：https://dev59.com/1XE85IYBdhLWcg3wpFAa - Alexander Bird

Answer 1

使用 document.activeElement 属性。

document.activeElement 属性支持 Chrome 2+、Firefox 3+、IE4+、Opera 9.6+ 和 Safari 4+ 浏览器。

请注意，此属性仅包含可接收按键输入（例如表单元素）的元素。

- Aron Rotteveel

---

自从昨天发布了Safari 4后，所有主要浏览器的最新版本都支持document.activeElement属性。但对于旧版浏览器，仍应使用事件hack（请参见Paolo的回答）： if(!document.activeElement) { /添加事件侦听器以为旧版浏览器设置document.activeElement/ } - gregers

MDN表示document.activeElement甚至在IE4中都得到了支持，更不用说Chrome 2+和Firefox 3+了。有没有更新这个答案的机会？ - Dan Dascalescu

Chrome 现在支持此功能。 - Philip

Answer 2

查看这篇博客文章。它提供了一个解决方案，使document.activeElement在所有浏览器中都能正常工作。

function _dom_trackActiveElement(evt) {
    if (evt && evt.target) { 
        document.activeElement = evt.target == document ? null : evt.target;
    }
}

function _dom_trackActiveElementLost(evt) { 
    document.activeElement = null;
}

if (!document.activeElement) {
    document.addEventListener("focus",_dom_trackActiveElement,true);
    document.addEventListener("blur",_dom_trackActiveElementLost,true);
}

需要注意的是：

这个实现有点过于悲观了；如果浏览器窗口失去焦点，activeElement会被设置为null（因为输入框也失去了焦点）。如果你的应用程序需要在浏览器窗口没有焦点时获取activeElement的值，你可以移除失去焦点事件监听器。

- Paolo Bergantino

---

了不起的东西。它对我有用。 - VJOY

Answer 3

仅供记录，有点晚了，当然在老版本的浏览器中不支持：

var element = document.querySelector(":focus");

应该适用于所有元素（例如，也包括锚点）。

- ernesto

Answer 4

也许 document.activeElement 可以使用，不过我不确定浏览器是否支持。在 Firefox 和 IE7 中似乎可以工作，但我想你也需要在 Opera 等其他浏览器中尝试一下。

- cic

Answer 5

请查看底部帖子。我认为那应该可以...

- JPunyon