如何确定哪个html页面元素有焦点？ [复制]

Posted 2023-02-21

【中文标题】如何确定哪个html页面元素有焦点？ [复制]

【英文标题】：How to determine which html page element has focus? [duplicate]

【发布时间】：2010-10-03 18:44:47

【问题描述】：

可能重复：How do I find out which DOM element has the focus?

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

【问题讨论】：

***.com/questions/2683742/… 似乎是一个相关的问题。

【参考方案1】：

使用document.activeElement 属性。

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

请注意，此属性将仅包含接受击键的元素（例如表单元素）。

【讨论】：

自 Safari 4 昨天发布以来。所有主要浏览器的最新版本现在都支持 document.activeElement 属性。不过，您仍然应该为旧版浏览器使用 event-hack（请参阅 Paolo 的回答）： if(!document.activeElement) /* 添加事件侦听器以为旧版浏览器设置 document.activeElement */

MDN says document.activeElement 甚至在 IE4 中都支持，更不用说 Chrome 2+ 和 Firefox 3+。有机会更新这个答案吗？

Chrome 现在支持这个

感谢您的建议！更新了答案。

【参考方案2】：

查看this blog post。它提供了一种解决方法，使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 值，即使浏览器窗口没有焦点，您可以移除 blur 事件侦听器。

【讨论】：

很棒的东西。它对我有用。

【参考方案3】：

只是为了记录，有点晚了，当然not supported in old browsers：

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

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

【参考方案4】：

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

【参考方案5】：

检查bottom post。我认为这会奏效......