我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?

我找这个的原因是:

我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。


当前回答

JQuery目前不支持:focus伪类。如果您在JQuery文档中查找它,请在“Selectors”下检查它指向W3C CSS文档的位置。我已经用Chrome、FF和IE 7+进行了测试。注意,要使其在IE中工作,<!DOCTYPE。。。必须存在于html页面上。下面是一个示例,假设您为具有焦点的元素分配了一个id:

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});

其他回答

如果您可以使用jQuery,它现在支持:focus,只需确保您使用的是1.6+版本。

此语句将为您提供当前关注的元素。

$(":focus")

From:如何使用jQuery选择关注它的元素

我发现,当试图确定哪个元素当前具有焦点时,以下代码片段非常有用。将以下内容复制到浏览器的控制台中,它将每秒打印出具有焦点的当前元素的详细信息。

setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);

如果打印出整个元素不能帮助您精确定位元素,请随意修改console.log以注销不同的内容,以帮助您精确地定位元素。

使用document.activeElement,所有主要浏览器都支持它。

以前,如果您试图找出哪个表单字段具有焦点,则无法做到。要模拟旧浏览器中的检测,请向所有字段添加一个“焦点”事件处理程序,并将最后一个焦点字段记录在变量中。添加一个“blur”处理程序,以在最后一个聚焦场发生模糊事件时清除变量。

如果需要删除activeElement,可以使用blur;document.activeElement.blur()。它会将activeElement更改为body。

相关链接:

activeElement浏览器兼容性document.activeElement的jQuery替代项

要获取上一个活动元素,请添加此。

示例:单击一个按钮,需要上一个活动元素。因为按钮一旦点击就会获得焦点。

document.addEventListener("focusout",ev => {
  document.previousActiveElement = ev.target;
});

JQuery目前不支持:focus伪类。如果您在JQuery文档中查找它,请在“Selectors”下检查它指向W3C CSS文档的位置。我已经用Chrome、FF和IE 7+进行了测试。注意,要使其在IE中工作,<!DOCTYPE。。。必须存在于html页面上。下面是一个示例,假设您为具有焦点的元素分配了一个id:

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});