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

我想在JavaScript中找出当前有焦点的元素。我一直在搜索DOM，但还没有找到我需要的东西。有没有办法做到这一点，如何做到

我找这个的原因是：

我正在尝试使用箭头键和

enter

键在输入元素表中导航。选项卡现在可以工作了，但输入，默认情况下箭头似乎不起作用。我已经设置了密钥处理部分，但现在我需要弄清楚如何在事件处理函数中转移焦点。

使用，所有主要浏览器都支持它

以前，若您试图找出哪个表单字段具有焦点，那个么您不能。要在旧浏览器中模拟检测，请向所有字段添加“焦点”事件处理程序，并在变量中记录最后一个焦点字段。添加一个“模糊”处理程序，在最后一个聚焦字段发生模糊事件时清除变量

如果需要删除

activeElement

，可以使用blur<代码>document.activeElement.blur（）。它会将

activeElement

更改为

body

相关链接：

---

正如JW所说，您无法找到当前关注的元素，至少是以独立于浏览器的方式。但是，如果您的应用程序仅限于IE（有些是…），您可以通过以下方式找到它：

document.activeElement

---

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

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

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

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

---

但是，很容易搞糟这一点，因为如果系统中有一个bug，而焦点不在您认为的位置，那么很难恢复正确的焦点。

我在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（）

检查元素是否具有焦点，前提是对给定元素调用了

startFocusTrack（）

我喜欢Joel S使用的方法，但我也喜欢

document.activeElement

的简单性。我使用jQuery并将两者结合起来。不支持

document.activeElement

的旧浏览器将使用

jQuery.data（）

存储“hasFocus”的值。较新的浏览器将使用

document.activeElement

。我假设

document.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确实支持

：focus

伪类。如果您要在JQuery文档中查找它，请在“选择器”下选中，它会将您指向。我已经用Chrome、FF和IE 7+进行了测试。请注意，要想在IE中工作，

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

如果您的浏览器不支持document.activeElement，如果您周围有jQuery，您应该能够使用非常简单的方法在所有焦点事件上填充它（未经测试，因为我手头没有满足这些条件的浏览器）：

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

此语句将获得当前关注的元素

$(":focus")

From:
document.activeElement
现在是规范，但在一些非主流/移动/旧浏览器中可能还不支持它。您可以返回到
查询选择器
（如果支持的话）。还值得一提的是，如果没有聚焦元素，即使浏览器窗口没有聚焦，
document.activeElement
也将返回
document.body

下面的代码将解决这个问题，并返回到
querySelector
提供更好的支持

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

另外需要注意的是这两种方法之间的性能差异。使用选择器查询文档总是比访问
activeElement
属性慢得多。请参见此图。
对于dojo，您可以使用dijit.getFocus（）
如果您使用的是jQuery，您可以使用它来确定元素是否处于活动状态：

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

如果焦点中没有可聚焦的元素，则
document.activeElement
可能默认为
元素。此外，如果某个元素被聚焦并且浏览器窗口模糊，
activeElement
将继续保持聚焦的元素

$(":focus")

如果这两种行为中的任何一种都不可取，请考虑基于CSS的方法：<代码>文档> QuestS选择器（':Copy'）> 
使用Debug .ActuvEngEnter可能存在问题。考虑：
<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</div>
</div>

如果您希望获得重点元素，请使用：

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

如果要获取的对象是
元素的实例
，则必须使用
document.activeElement
，但如果要获取的对象是
文本的实例
，则必须使用
document.getSelection（）.focusNode

我希望能有所帮助。
如果文档没有聚焦（因此文档中没有任何内容是聚焦的！），则
document.activeElement本身仍然可以返回元素

您可能想要这种行为，或者它可能无关紧要（例如，在
按键按下事件中），但如果您需要知道某些内容实际上是聚焦的，您可以另外进行检查

以下内容将为您提供聚焦元素（如果有），或者
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
);


稳健性说明：在
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
);

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);