我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
当前回答
要获取上一个活动元素,请添加此。
示例:单击一个按钮,需要上一个活动元素。因为按钮一旦点击就会获得焦点。
document.addEventListener("focusout",ev => {
document.previousActiveElement = ev.target;
});
其他回答
使用document.activeElement,所有主要浏览器都支持它。
以前,如果您试图找出哪个表单字段具有焦点,则无法做到。要模拟旧浏览器中的检测,请向所有字段添加一个“焦点”事件处理程序,并将最后一个焦点字段记录在变量中。添加一个“blur”处理程序,以在最后一个聚焦场发生模糊事件时清除变量。
如果需要删除activeElement,可以使用blur;document.activeElement.blur()。它会将activeElement更改为body。
相关链接:
activeElement浏览器兼容性document.activeElement的jQuery替代项
我发现,当试图确定哪个元素当前具有焦点时,以下代码片段非常有用。将以下内容复制到浏览器的控制台中,它将每秒打印出具有焦点的当前元素的详细信息。
setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);
如果打印出整个元素不能帮助您精确定位元素,请随意修改console.log以注销不同的内容,以帮助您精确地定位元素。
使用document.activeElement可能存在问题。请考虑:
<div contentEditable="true">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>
如果用户关注内部div,那么document.activeElement仍然引用外部div。您不能使用document.active Element来确定哪个内部div具有焦点。
以下函数绕过此问题,并返回聚焦节点:
function active_node(){
return window.getSelection().anchorNode;
}
如果您希望获得焦点元素,请使用:
function active_element(){
var anchor = window.getSelection().anchorNode;
if(anchor.nodeType == 3){
return anchor.parentNode;
}else if(anchor.nodeType == 1){
return anchor;
}
}
使用document.activeElement.id
appending.id过滤掉返回的整个DOM,并允许您仅处理已标识的元素
如果文档没有聚焦,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;
});
您可以通过使用非事件方式修复初始状态假设,但也可以使用它。