如何找出哪个 DOM 元素具有焦点？

使用 document.activeElement，所有主流浏览器都支持它。

以前，如果你试图找出哪个表单字段有焦点，你无法做到。若要在较旧的浏览器中模拟检测，请向所有字段添加“焦点”事件处理程序，并将最后聚焦的字段记录在变量中。添加“模糊”处理程序，以在上次聚焦字段的模糊事件时清除变量。

如果需要删除，可以使用模糊;它会将 更改为 .activeElementdocument.activeElement.blur()activeElementbody

相关链接：

• activeElement 浏览器兼容性
• document.activeElement 的 jQuery 替代方案

正如 JW 所说，您无法找到当前聚焦的元素，至少以独立于浏览器的方式。但是，如果你的应用是 IE only（有些是...），你可以通过以下方式找到它：

document.activeElement

看起来IE毕竟没有错，这是HTML5草案的一部分，并且似乎至少得到了最新版本的Chrome，Safari和Firefox的支持。

只是把它放在这里，以给出我最终想出的解决方案。

我创建了一个名为 document.activeInputArea 的属性，并使用 jQuery 的 HotKeys 插件来捕获箭头键、Tab 键和 Enter 键的键盘事件，并创建了一个用于单击输入元素的事件处理程序。

然后，每次焦点改变时，我都会调整 activeInputArea，这样我就可以使用该属性来找出我的位置。

不过，这很容易搞砸，因为如果你的系统中有一个错误，并且焦点不在你认为的位置，那么就很难恢复正确的焦点。

我在 Mootools 中用于这些目的的一个小帮手：

FocusTracker = {
    startFocusTracking: function() {
       this.store('hasFocus', false);
       this.addEvent('focus', function() { this.store('hasFocus', true); });
       this.addEvent('blur', function() { this.store('hasFocus', false); });
    },

    hasFocus: function() {
       return this.retrieve('hasFocus');
    }
}

Element.implement(FocusTracker);

这样，您可以检查元素是否具有对给定元素调用的焦点。el.hasFocus()startFocusTracking()

我喜欢 Joel S 使用的方法，但我也喜欢 .我使用了jQuery并将两者结合起来。不支持的旧版浏览器将用于存储“hasFocus”的值。较新的浏览器将使用 .我认为这将有更好的性能。document.activeElementdocument.activeElementjQuery.data()document.activeElementdocument.activeElement

(function($) {
var settings;
$.fn.focusTracker = function(options) {
    settings = $.extend({}, $.focusTracker.defaults, options);

    if (!document.activeElement) {
        this.each(function() {
            var $this = $(this).data('hasFocus', false);

            $this.focus(function(event) {
                $this.data('hasFocus', true);
            });
            $this.blur(function(event) {
                $this.data('hasFocus', false);
            });
        });
    }
    return this;
};

$.fn.hasFocus = function() {
    if (this.length === 0) { return false; }
    if (document.activeElement) {
        return this.get(0) === document.activeElement;
    }
    return this.data('hasFocus');
};

$.focusTracker = {
    defaults: {
        context: 'body'
    },
    focusedElement: function(context) {
        var focused;
        if (!context) { context = settings.context; }
        if (document.activeElement) {
            if ($(document.activeElement).closest(context).length > 0) {
                focused = document.activeElement;
            }
        } else {
            $(':visible:enabled', context).each(function() {
                if ($(this).data('hasFocus')) {
                    focused = this;
                    return false;
                }
            });
        }
        return $(focused);
    }
};
})(jQuery);

JQuery 支持当前可用的伪类。如果你在 JQuery 文档中查找它，请在“选择器”下查看它指向 W3C CSS 文档的位置。我已经使用 Chrome、FF 和 IE 7+ 进行了测试。请注意，要使其在 IE 中工作，必须存在于 html 页面上。下面是一个示例，假设您已将 id 分配给具有焦点的元素：:focus<!DOCTYPE...

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});

阅读其他答案，并尝试自己，它似乎会为您提供大多数浏览器中所需的元素。document.activeElement

如果你有一个不支持document.activeElement的浏览器，如果你有jQuery，你应该能够在所有焦点事件上用这样非常简单的东西来填充它（未经测试，因为我手头没有满足这些标准的浏览器）：

if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway
  $('*').live('focus', function () { // Attach to all focus events using .live()
    document.activeElement = this; // Set activeElement to the element that has been focussed
  });
}

如果你可以使用jQuery，它现在支持：focus，只要确保你使用的是1.6+版本。

此语句将为您提供当前重点的元素。

$(":focus")

From：如何使用 jQuery 选择一个专注于它的元素

document.activeElement现在是 HTML5 工作草案规范的一部分，但在某些非主要/移动/较旧的浏览器中可能尚不支持它。您可以回退到（如果支持）。还值得一提的是，如果没有元素被聚焦，即使浏览器窗口没有聚焦，也会返回。querySelectordocument.activeElementdocument.body

以下代码将解决此问题，并回退到提供更好的支持。querySelector

var focused = document.activeElement;
if (!focused || focused == document.body)
    focused = null;
else if (document.querySelector)
    focused = document.querySelector(":focus");

另外需要注意的是这两种方法之间的性能差异。使用选择器查询文档总是比访问属性慢得多。请参阅此 jsperf.com 测试。activeElement

在 dojo 中，你可以使用 dijit.getFocus（）

如果您使用的是 jQuery，则可以使用它来确定某个元素是否处于活动状态：

$("input#id").is(":active");

document.activeElement如果没有可聚焦的元素处于焦点中，则可以默认为元素。此外，如果某个元素处于聚焦状态并且浏览器窗口模糊，则将继续保留聚焦元素。<body>activeElement

如果这两种行为中的任何一种都不可取，请考虑基于 CSS 的方法： .document.querySelector( ':focus' )

使用 document.activeElement 存在潜在问题。考虑：

<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</div>
</div>

如果用户关注的是内部 div，则 document.activeElement 仍会引用外部 div。不能使用 document.activeElement 来确定哪个内部 div 具有焦点。

以下函数解决了这个问题，并返回聚焦节点：

function active_node(){
  return window.getSelection().anchorNode;
}

如果您希望获得聚焦元素，请使用：

function active_element(){
  var anchor = window.getSelection().anchorNode;
  if(anchor.nodeType == 3){
        return anchor.parentNode;
  }else if(anchor.nodeType == 1){
        return anchor;
  }
}

如果要获取 的实例对象，则必须使用 ，但如果要获取 的实例，则必须使用 。Elementdocument.activeElementTextdocument.getSelection().focusNode

我希望对你有所帮助。

就其本身而言，如果文档未聚焦，仍可以返回元素（因此文档中没有任何内容未聚焦！document.activeElement

你可能想要这种行为，或者它可能无关紧要（例如，在一个事件中），但如果你需要知道某些东西实际上是有焦点的，你可以另外检查document.hasFocus（）。keydown

如果有聚焦元素，下面将为您提供重点元素，否则.null

var focused_element = null;
if (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
) {
    focused_element = document.activeElement;
}

要检查特定元素是否具有焦点，方法更简单：

var input_focused = document.activeElement === input && document.hasFocus();

要检查是否有任何内容是重点的，它再次变得更加复杂：

var anything_is_focused = (
    document.hasFocus() &&
    document.activeElement !== null &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
);

---

鲁棒性 注意：在它检查 和 的代码中，这是因为某些浏览器返回其中之一，或者当没有焦点时。document.bodydocument.documentElementnull

它没有考虑（或可能）是否具有属性，因此实际上可以聚焦。如果你正在编写一个库或其他东西，并希望它是健壮的，你可能应该以某种方式处理它。<body><html>tabIndex

---

这是一个（重语引号）获取聚焦元素的“单行”版本，这在概念上更复杂，因为你必须了解短路，而且你知道，它显然不适合一行，假设你希望它是可读的。
我不会推荐这个。但如果你是 1337 hax0r，idk...它就在那里。
如果您不介意在某些情况下获得，您也可以删除该部分。（如果 is ，你仍然可以得到）：|| nullfalsenulldocument.activeElementnull

var focused_element = (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement &&
    document.activeElement
) || null;

---

为了检查特定元素是否聚焦，您也可以使用事件，但这种方式需要设置（并可能拆卸），重要的是，假设初始状态：

var input_focused = false;
input.addEventListener("focus", function() {
    input_focused = true;
});
input.addEventListener("blur", function() {
    input_focused = false;
});

您可以使用非事件方式来修复初始状态假设，但您也可以改用它。

我发现以下代码片段在尝试确定当前具有焦点的元素时很有用。将以下内容复制到浏览器的控制台中，每秒钟都会打印出具有焦点的当前元素的详细信息。

setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);

如果打印出整个元素不能帮助您确定元素，请随意修改以注销其他内容以帮助您确定确切的元素。console.log

简单使用 document.activeElement 查找当前活动元素

如果您想在开发工具上测试重点元素，我建议您使用。

$(":focus")

当您单击开发工具中的任何内容时，将更改为。document.activeElementbody

要获取上一个活动元素，请添加此元素。

示例：您单击一个按钮并需要上一个活动元素。由于按钮一旦点击它就会成为焦点。

document.addEventListener("focusout",ev => {
  document.previousActiveElement = ev.target;
});

用document.activeElement.id

追加过滤器返回整个 DOM，并允许您仅使用已识别的元素.id

我认为克里斯蒂安的答案最接近正确答案;此外，该事件具有一个名为的属性，该属性允许人们找出获得焦点的内容。focusoutrelatedTarget

document.addEventListener("focusout",ev => {
  const focusedElement = ev.relatedTarget;

  // ...
});

其他使用并具有烦人的警告的答案。querySelector(':focus')activeElement

https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget

可以使用 document.activeElement 属性来确定当前具有焦点的 DOM 元素。此属性将返回文档中当前聚焦的元素，如果没有元素具有焦点，则返回 null。可以将此属性与事件侦听器结合使用，以检测焦点何时更改。例如：

document.addEventListener('focusin', function(event) {
  console.log('Focused element:', document.activeElement);
});