我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?

我找这个的原因是:

我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。


当前回答

document.activeElement现在是HTML5工作草案规范的一部分,但在一些非主流/移动/旧浏览器中可能还不支持它。您可以返回到querySelector(如果支持)。还值得一提的是,如果没有元素聚焦,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属性慢得多。请参阅此jsperf.com测试。

其他回答

document.activeElement现在是HTML5工作草案规范的一部分,但在一些非主流/移动/旧浏览器中可能还不支持它。您可以返回到querySelector(如果支持)。还值得一提的是,如果没有元素聚焦,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属性慢得多。请参阅此jsperf.com测试。

如果要获取Element实例的对象,必须使用document.activeElement,但如果要获取Text实例的对象则必须使用document.getSelection().focusNode。

我希望能有所帮助。

我发现,当试图确定哪个元素当前具有焦点时,以下代码片段非常有用。将以下内容复制到浏览器的控制台中,它将每秒打印出具有焦点的当前元素的详细信息。

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

如果打印出整个元素不能帮助您精确定位元素,请随意修改console.log以注销不同的内容,以帮助您精确地定位元素。

我喜欢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);

对于dojo,可以使用dijit.getFocus()