我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
我想知道在JavaScript中,哪个元素当前具有焦点。我一直在浏览DOM,还没有找到我需要的东西。有没有办法做到这一点,以及如何做到?
我找这个的原因是:
我正在尝试制作像箭头一样的键,并输入在输入元素表中导航。Tab键现在起作用了,但输入和箭头在默认情况下似乎不起作用。我已经设置了关键处理部分,但现在我需要弄清楚如何将焦点转移到事件处理功能上。
当前回答
如果您想在开发工具上测试重点元素,我建议使用。
$(":focus")
当您单击开发工具中的任何内容时,As document.activeElement将变为body。
其他回答
使用document.activeElement,所有主要浏览器都支持它。
以前,如果您试图找出哪个表单字段具有焦点,则无法做到。要模拟旧浏览器中的检测,请向所有字段添加一个“焦点”事件处理程序,并将最后一个焦点字段记录在变量中。添加一个“blur”处理程序,以在最后一个聚焦场发生模糊事件时清除变量。
如果需要删除activeElement,可以使用blur;document.activeElement.blur()。它会将activeElement更改为body。
相关链接:
activeElement浏览器兼容性document.activeElement的jQuery替代项
如果要获取Element实例的对象,必须使用document.activeElement,但如果要获取Text实例的对象则必须使用document.getSelection().focusNode。
我希望能有所帮助。
正如JW所说,您无法找到当前关注的元素,至少以独立于浏览器的方式。但如果你的应用程序仅为IE(有些是…),你可以通过以下方式找到它:
document.activeElement
看起来IE并没有什么问题,毕竟这是HTML5草案的一部分,似乎至少得到了最新版本的Chrome、Safari和Firefox的支持。
使用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;
}
}
JQuery目前不支持:focus伪类。如果您在JQuery文档中查找它,请在“Selectors”下检查它指向W3C CSS文档的位置。我已经用Chrome、FF和IE 7+进行了测试。注意,要使其在IE中工作,<!DOCTYPE。。。必须存在于html页面上。下面是一个示例,假设您为具有焦点的元素分配了一个id:
$(":focus").each(function() {
alert($(this).attr("id") + " has focus!");
});