我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
当前回答
使用document.activeElement,所有主要浏览器都支持它。
以前,如果您试图找出哪个表单字段具有焦点,则无法做到。要模拟旧浏览器中的检测,请向所有字段添加一个“焦点”事件处理程序,并将最后一个焦点字段记录在变量中。添加一个“blur”处理程序,以在最后一个聚焦场发生模糊事件时清除变量。
如果需要删除activeElement,可以使用blur;document.activeElement.blur()。它会将activeElement更改为body。
相关链接:
activeElement浏览器兼容性document.activeElement的jQuery替代项
其他回答
把这个放在这里是为了给出我最终想出的解决方案。
我创建了一个名为document.activeInputArea的属性,并使用jQuery的热键插件来捕获箭头键、tab和enter的键盘事件,我还创建了用于单击输入元素的事件处理程序。
然后,每次焦点改变时,我都会调整activeInputArea,这样我就可以使用该属性来查找我所在的位置。
不过,这很容易搞砸,因为如果你的系统中有一个bug,并且焦点不在你认为的位置,那么很难恢复正确的焦点。
如果您可以使用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()。
正如JW所说,您无法找到当前关注的元素,至少以独立于浏览器的方式。但如果你的应用程序仅为IE(有些是…),你可以通过以下方式找到它:
document.activeElement
看起来IE并没有什么问题,毕竟这是HTML5草案的一部分,似乎至少得到了最新版本的Chrome、Safari和Firefox的支持。
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测试。