我如何找出哪个DOM元素具有焦点?

JavaScript

神奇古一

2020-03-09

我想用JavaScript找出当前关注的元素。我一直在浏览DOM,但尚未找到我需要的东西。有没有办法做到这一点,怎么做?

我寻找这个的原因:

我正在尝试制作箭头之类的键并enter浏览输入元素表。选项卡现在可以使用,但是可以输入,默认情况下,箭头没有显示。我已经设置了关键处理部分,但是现在我需要弄清楚如何在事件处理功能中转移焦点。

第291篇《我如何找出哪个DOM元素具有焦点?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
番长小哥 2020.03.09

使用dojo,可以使用dijit.getFocus()

神奇古一 2020.03.09

只需将其放在此处即可给出我最终想到的解决方案。

我创建了一个名为document.activeInputArea的属性,并使用jQuery的HotKeys插件捕获了箭头键,Tab键和Enter键的键盘事件,并创建了一个用于单击输入元素的事件处理程序。

然后,每当焦点更改时,我都会调整activeInputArea,因此我可以使用该属性来找出我所在的位置。

不过,这很容易搞砸,因为如果系统中有错误,并且焦点不在您认为的位置,那么很难恢复正确的焦点。

JinJin乐 2020.03.09

如果您使用的是jQuery,则可以使用它来查找元素是否处于活动状态:

$("input#id").is(":active");
DavaidHarry 2020.03.09

我发现以下代码段在尝试确定当前具有焦点的元素时很有用。将以下内容复制到浏览器的控制台中,然后每秒将打印出具有焦点的当前元素的详细信息。

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

console.log如果打印出整个元素不能帮助您确定元素,则可以随意修改来注销其他内容,以帮助您确定确切的元素。

猪猪飞云 2020.03.09

如果要获得作为的实例的对象,则Element必须使用document.activeElement,但如果要获得作为的实例的对象,则Text必须使用document.getSelection().focusNode

希望对您有所帮助。

古一老丝宝儿 2020.03.09

使用document.activeElement有潜在的问题。考虑:

<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</div>
</div>

如果用户专注于一个内部div,那么document.activeElement仍然引用外部div。您不能使用document.activeElement来确定哪个内部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;
  }
}
米亚Sam 2020.03.09

到目前为止,JQuery确实支持:focus伪类。如果要在JQuery文档中查找它,请在“选择器”下进行选择,该位置将您指向W3C CSS文档我已经使用Chrome,FF和IE 7+进行了测试。请注意,要使其在IE中运行,<!DOCTYPE...必须在html页面上存在。这是一个示例,假定您已为具有焦点的元素分配了ID:

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

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测试

樱小小Tom 2020.03.09

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

该语句将使您获得当前关注的元素。

$(":focus")

来自:如何使用jQuery选择一个重点关注的元素

梅老丝 2020.03.09

正如JW所说,您至少无法以浏览器无关的方式找不到当前关注的元素。但是,如果您的应用程序仅是IE(有些是...),则可以通过以下方式找到它:

document.activeElement

编辑:看来IE毕竟并没有什么错,这是HTML5草案的一部分,并且至少受最新版​​本的Chrome,Safari和Firefox支持。

阿良 2020.03.09

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

Previously, if you were trying to find out what form field has focus, you could not. To emulate detection within older browsers, add a "focus" event handler to all fields and record the last-focused field in a variable. Add a "blur" handler to clear the variable upon a blur event for the last-focused field.

Related links:

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android