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

我找这个的原因是:

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


当前回答

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

其他回答

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

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

$(":focus")

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

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

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

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

$(":focus")

当您单击开发工具中的任何内容时,As document.activeElement将变为body。

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

document.activeElement

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

我在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.hhasFocus()检查元素是否具有焦点,前提是对给定元素调用了startFocusTracking()。