我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
当前回答
如果您可以使用jQuery,它现在支持:focus,只需确保您使用的是1.6+版本。
此语句将为您提供当前关注的元素。
$(":focus")
From:如何使用jQuery选择关注它的元素
其他回答
我在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()。
如果您想在开发工具上测试重点元素,我建议使用。
$(":focus")
当您单击开发工具中的任何内容时,As document.activeElement将变为body。
如果文档没有聚焦,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;
});
您可以通过使用非事件方式修复初始状态假设,但也可以使用它。
使用document.activeElement.id
appending.id过滤掉返回的整个DOM,并允许您仅处理已标识的元素
正如JW所说,您无法找到当前关注的元素,至少以独立于浏览器的方式。但如果你的应用程序仅为IE(有些是…),你可以通过以下方式找到它:
document.activeElement
看起来IE并没有什么问题,毕竟这是HTML5草案的一部分,似乎至少得到了最新版本的Chrome、Safari和Firefox的支持。