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

我找这个的原因是:

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


当前回答

使用document.activeElement.id

appending.id过滤掉返回的整个DOM,并允许您仅处理已标识的元素

其他回答

使用document.activeElement.id

appending.id过滤掉返回的整个DOM,并允许您仅处理已标识的元素

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

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

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

阅读其他答案,并尝试自己,看起来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可能存在问题。请考虑:

<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;
  }
}