我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
当前回答
如果您使用的是jQuery,可以使用它来确定元素是否处于活动状态:
$("input#id").is(":active");
其他回答
阅读其他答案,并尝试自己,看起来document.activeElement将为您提供大多数浏览器所需的元素。
如果你有一个不支持document.activeElement的浏览器,如果你有jQuery,你应该可以在所有焦点事件中使用类似这样的简单方法(未经测试,因为我手头没有一个满足这些条件的浏览器)来填充它:
if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway
$('*').live('focus', function () { // Attach to all focus events using .live()
document.activeElement = this; // Set activeElement to the element that has been focussed
});
}
使用document.activeElement,所有主要浏览器都支持它。
以前,如果您试图找出哪个表单字段具有焦点,则无法做到。要模拟旧浏览器中的检测,请向所有字段添加一个“焦点”事件处理程序,并将最后一个焦点字段记录在变量中。添加一个“blur”处理程序,以在最后一个聚焦场发生模糊事件时清除变量。
如果需要删除activeElement,可以使用blur;document.activeElement.blur()。它会将activeElement更改为body。
相关链接:
activeElement浏览器兼容性document.activeElement的jQuery替代项
要获取上一个活动元素,请添加此。
示例:单击一个按钮,需要上一个活动元素。因为按钮一旦点击就会获得焦点。
document.addEventListener("focusout",ev => {
document.previousActiveElement = ev.target;
});
如果您使用的是jQuery,可以使用它来确定元素是否处于活动状态:
$("input#id").is(":active");
如果您想在开发工具上测试重点元素,我建议使用。
$(":focus")
当您单击开发工具中的任何内容时,As document.activeElement将变为body。