如何确定哪个 html 页面元素具有焦点?

IT技术 javascript html
2021-01-20 17:28:36

可能的重复:
如何找出哪个 DOM 元素具有焦点?

javascript中有没有办法确定哪个html页面元素具有焦点?

5个回答

使用document.activeElement物业。

document.activeElementChrome 2+、Firefox 3+、IE4+、Opera 9.6+ 和 Safari 4+ 支持属性。

请注意,此属性将仅包含接受击键的元素(例如表单元素)。

Chrome 现在支持这个
2021-03-22 17:28:36
感谢您的建议!更新了答案。
2021-03-25 17:28:36
MDN 说IE4 甚至支持document.activeElement,更不用说 Chrome 2+ 和 Firefox 3+。有机会更新这个答案吗?
2021-04-03 17:28:36
由于 Safari 4 于昨天发布。所有主要浏览器的最新版本现在都支持 document.activeElement 属性。不过,您仍然应该对旧浏览器使用事件黑客(请参阅 Paolo 的回答): if(!document.activeElement) { /* add event-listeners to set document.activeElement for old browsers */ }
2021-04-13 17:28:36

看看这篇博文它提供了一种解决方法,以便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 值,您可以删除模糊事件侦听器。

了不起的东西。它对我有用。
2021-04-02 17:28:36

只是为了记录,有点晚了,当然旧浏览器不支持

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

应该适用于所有元素(例如也锚点)。

也许document.activeElement,不知道浏览器支持。似乎可以在 Firefox 和 IE7 中使用,但我想您也必须在 Opera 等中尝试一下。

检查底部的帖子我认为那会奏效...