我想在 JavaScript 中找出当前具有焦点的元素。我一直在浏览 DOM，但还没有找到我需要的东西。有没有办法做到这一点，以及如何做到这一点？
我正在寻找这个的原因：
我正在尝试制作箭头之类的键并enter在输入元素表中导航。Tab 现在可以工作，但输入和箭头似乎默认情况下不起作用。我已经设置了关键处理部分，但现在我需要弄清楚如何在事件处理函数中移动焦点。
如何找出哪个 DOM 元素具有焦点？
IT技术
javascript
dom
2021-01-17 17:34:36
6个回答
使用document.activeElement，所有主流浏览器都支持。
以前，如果您试图找出哪个表单字段具有焦点，则无法找到。要在旧浏览器中模拟检测，请向所有字段添加“焦点”事件处理程序，并将最后一个焦点字段记录在变量中。添加“模糊”处理程序以在最后聚焦的字段的模糊事件时清除变量。
如果您需要删除activeElement您可以使用模糊；document.activeElement.blur(). 它将更改activeElement为body。
相关链接：
正如 JW 所说，您无法找到当前聚焦的元素，至少以独立于浏览器的方式。但是如果您的应用程序仅适用于 IE（有些是...），您可以通过以下方式找到它：
document.activeElement
看来 IE 毕竟并没有什么问题，这是 HTML5 草案的一部分，似乎至少得到了最新版本的 Chrome、Safari 和 Firefox 的支持。
如果您可以使用 jQuery，它现在支持 :focus，只需确保您使用的是 1.6+ 版本。
此语句将为您提供当前关注的元素。
$(":focus")
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 测试。
document.activeElement如果文档没有聚焦（因此文档中的任何内容都没有聚焦！），它本身仍然可以返回一个元素。
您可能想要这种行为，或者它可能无关紧要（例如在一个keydown事件中），但是如果您需要知道某些事情实际上是集中的，您可以另外检查document.hasFocus().
如果有，以下将为您提供焦点元素，否则为null。
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属性，因此实际上可以被 focus。如果您正在编写一个库或其他东西并希望它健壮，您可能应该以某种方式处理它。
这是获取焦点元素的（重引用）“单行”版本，它在概念上更复杂，因为您必须了解短路，并且您知道，它显然不适合在一条线上，假设您希望它是可读的。
我不会推荐这个。但是，如果您是 1337 hax0r，idk...它就在那里。如果您不介意在某些情况下获得，
您也可以移除该|| null部件false。（null如果document.activeElement是，你仍然可以得到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;
});
您可以通过使用非事件方式来修复初始状态假设，但您也可以使用它来代替。
其它你可能感兴趣的问题