我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
当前回答
我发现,当试图确定哪个元素当前具有焦点时,以下代码片段非常有用。将以下内容复制到浏览器的控制台中,它将每秒打印出具有焦点的当前元素的详细信息。
setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);
如果打印出整个元素不能帮助您精确定位元素,请随意修改console.log以注销不同的内容,以帮助您精确地定位元素。
其他回答
我发现,当试图确定哪个元素当前具有焦点时,以下代码片段非常有用。将以下内容复制到浏览器的控制台中,它将每秒打印出具有焦点的当前元素的详细信息。
setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);
如果打印出整个元素不能帮助您精确定位元素,请随意修改console.log以注销不同的内容,以帮助您精确地定位元素。
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测试。
对于dojo,可以使用dijit.getFocus()
我在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()。
如果文档没有聚焦,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;
});
您可以通过使用非事件方式修复初始状态假设,但也可以使用它。