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

我找这个的原因是:

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


当前回答

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

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

其他回答

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

document.activeElement

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

把这个放在这里是为了给出我最终想出的解决方案。

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

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

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

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

此语句将为您提供当前关注的元素。

$(":focus")

From:如何使用jQuery选择关注它的元素

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

如果文档没有聚焦,document.activeElement本身仍然可以返回一个元素(因此文档中的任何内容都没有聚焦!)

您可能想要这样的行为,或者这可能无关紧要(例如,在keydown事件中),但如果您需要知道某些事情实际上是聚焦的,您可以另外检查document.hasFocus()。

如果有聚焦元素,则以下内容将为您提供聚焦元素,否则为空。

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部分。(如果document.activeElement为null,则仍可能为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;
});

您可以通过使用非事件方式修复初始状态假设,但也可以使用它。