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

1309

我想用JavaScript找出当前关注的元素。我一直在浏览DOM，但尚未找到我需要的东西。有办法做到这一点吗？

我寻找这个的原因：

我正在尝试制作箭头之类的键并enter浏览输入元素表。选项卡现在可以使用，但是可以输入，默认情况下，箭头没有显示。我已经设置了关键处理部分，但是现在我需要弄清楚如何在事件处理功能中转移焦点。

javascript  dom 
— 托尼·彼得森
source
2
这是一个console.log重点关注的元素的书签：github.com/lingtalfi/where-is-focus-bookmarklet
— ling
您可以使用以下find-focused-element软件包：npmjs.com/package/find-focused-element
— Maxim Zhukov

Answers:

1533

使用document.activeElement，所有主要浏览器均支持。

以前，如果您试图找出哪个表单字段具有焦点，则无法。要在旧版浏览器中模拟检测，请将​​“焦点”事件处理程序添加到所有字段，并将最后关注的字段记录在变量中。添加一个“模糊”处理程序，以在发生模糊事件时针对最后关注的字段清除变量。

如果需要删除，activeElement可以使用模糊；document.activeElement.blur()。它将更改activeElement为body。

相关链接：

— Dave Jarvis
source
53
不确定IE，但是FF和Safari都返回BODY元素。
— JW。
10
activeElement实际上不返回聚焦元素。任何元素都可以具有焦点。如果文档具有4个“ scrolldivs”，则这些div中的0或1可通过箭头键滚动。如果单击一个，则该div将被聚焦。如果单击全部，则身体将聚焦。你如何找出哪个scrolldiv是重点？jsfiddle.net/rudiedirkx/bC5ke/show（检查控制台）
— Rudie 2012年
18
@ Rudie，@ Stewart：我在您的小提琴的基础上创建了一个更加精致的游乐场：jsfiddle.net/mklement/72rTF。您会发现，唯一可以真正关注此类浏览器的主流浏览器（截至2012年末）div是Firefox 17，并且只能通过制表到该浏览器。所有主要浏览器通过document.activeElement其返回的元素类型仅限于与输入相关的元素。如果没有此类元素具有焦点，则所有主要浏览器都会返回该body元素-IE 9除外，IE 9将返回该html元素。
— mklement0
10
不确定是否有帮助，但是您可以通过包含属性tabindex =“ 0”使div等元素获得键盘焦点
— Marco Luglio 2013年
4
任何访问都document.activeElement应该包装在中，try catch因为在某些情况下它可能引发异常（而不仅仅是IE9 AFAIK）。参见bugs.jquery.com/ticket/13393和bugs.jqueryui.com/ticket/8443
— robocat
127

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

document.activeElement

编辑：看来IE毕竟没有错，这是HTML5草案的一部分，并且至少受最新版​​本的Chrome，Safari和Firefox支持。

— 旺爱
source
5
FF3也是。这实际上是围绕“焦点管理”的HTML5规范的一部分。
— 月牙食
2
它适用于当前版本的Chrome和Opera（9.62）。在OS X的Safari 3.2.3中无法使用，但在昨天发布的Safari 4中可以使用:)
— gregers 2009年
chrome 19仍然相同：S
— Sebas 2012年
1
当您使用键盘跳到元素上时，它仅适用于chrome（20）/ safari（5.1.3）。如果单击它，则jquery：focus选择器和document.activeElement都不会成功返回您单击的内容（分别返回undefined和document body元素）。PS：我不敢相信这个线程已有2年历史了，并且Webkit上仍然存在回归问题，还有跳过链接不起作用的问题，但是添加实验性CSS3的工作量很大。认为我可能会回去向我的家人和朋友推荐Firefox。
— 2012年
单击以将焦点放在文本区域或其他输入上时，^^ document.activeElement很好。如果是链接，则单击（在页面中或其他明显方式）时将不会聚焦。
— marksyzm 2013年
84

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

该语句将使您获得当前关注的元素。

$(":focus")

来自：如何使用jQuery选择一个重点关注的元素

— 威廉·丹尼斯
source
4
很好，但是jQuery如何做到这一点？document.activeElement？我发现了这一点： return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
— 哈里·佩科宁
46

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测试。

— 安迪
source
21

就其本身而言，document.activeElement如果文档未聚焦，则仍可以返回一个元素（因此文档中的任何内容都不聚焦！）

您可能想要这种行为，或者可能并不重要（例如，在keydown事件内），但是如果您需要了解实际关注的事物，则可以另外进行检查document.hasFocus()。

如果有一个元素，否则以下内容将为您提供重点关注的元素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.body和的代码中document.documentElement，这是因为某些浏览器会返回其中之一，或者null没有重点关注时。

它不考虑<body>（或也许<html>）是否具有tabIndex属性，因此实际上可以被关注。如果您正在编写一个库或其他东西，并且希望它很健壮，则可能应该以某种方式进行处理。

这里有一个（重越来越聚焦元素，它的引号手势）“的一行”版本的概念变得更复杂，因为你必须知道的短路，和你知道的，这显然不适合在一行，假设你希望它可读。
我不会推荐这个。但是，如果您是1337 hax0r，则idk ...就在那里。如果您不介意在某些情况下使用，
也可以删除该|| null零件false。（您仍然可以得到null，如果document.activeElement是null）：

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

您可以通过使用非事件方式来修正初始状态假设，但是您也可以使用它来代替。

— 1j01
source
15

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

如果这两种行为都不理想，请考虑使用基于CSS的方法：document.querySelector( ':focus' )。

— 内特·惠特克
source
太好了，是的，在我看来，您的方法绝对有意义。我可以使用'tabindex =“-1”'设置可聚焦元素，如果它们都没有聚焦（比如我不关心的一些文本或图片），则document.querySelector（'：focus'）返回空值。
— 曼弗雷德（Manfred）
请参阅我的回答以避免使用querySelector：stackoverflow.com/a/40873560/2624876
— 1j01 2016年
10

我喜欢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);
— 杰森
source
3
可以用@William Denniss的替换$("*:focus")吗？
— Pylinux
我想可以。我很久以前就写过这篇文章，但五年后，我再也没有理由重新考虑更好的解决方案了。试试看！我可能会做同样的事情。我少了我们网站上的插件！:)
— Jason
10

我在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()被称为给定元素上。

— 乔尔·S
source
7

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

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});
— DeezCashews
source
1
您应该（总是？）使用this.id代替$(this).attr('id')，或者至少（当您已经拥有jQuery对象时）使用$(this)[0].id。此级别的本地Javascript更快，更高效。在这种情况下可能不会引起注意，但是在整个系统中，您会发现有所不同。
— Martijn 2015年
7

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

希望对您有所帮助。

— 普劳林多
source
哪种方式更好？
— 2016年
打开浏览器的检查器，单击页面上的任何位置，经过此位置，document.getSelection().focusNode.parentElement然后点击Enter。在那之后，过去document.activeElement并做同样的事情。;）
— rplaurindo
有了这个评论框突出重点，document.activeElement给出了<textarea>而document.getSelection().focusNode给<td>包含<textarea>（并document.getSelection().focusNode.parentElement给出了<tr>含<td>）
— 1j01
抱歉，我很抱歉。我没有很好地解释。如果要获取作为的实例的对象，则Element必须使用document.activeElement，但是如果要获取作为的实例的对象，则Text必须使用document.getSelection().focusNode。请再次测试。希望我能帮上忙。
— rplaurindo '16
2
问题是要问哪个元素当前具有焦点。而且focusNode也不保证它是文本节点。
— 1
6

使用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;
  }
}
— 内森·K
source
3
这并不是真正的问题document.activeElement：内部<div>元素实际上无法获得焦点，因为您可以通过将:focus伪类设置为可见的东西来直观地看到（例如：jsfiddle.net/4gasa1t2/1）。您要说的是内部<div>的哪个包含选择或插入符号，这是一个单独的问题。
— 蒂姆·唐
6

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

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

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

— vegemite4me
source
5

阅读其他答案并尝试一下自己，似乎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
  });
}
— 里门罗
source
5

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

$("input#id").is(":active");
— Arne
source
3

只需将其放在此处即可给出我最终想到的解决方案。

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

然后，每当焦点改变时，我都会调整activeInputArea，因此我可以使用该属性找出我在哪里。

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

— 托尼·彼得森
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.