Javascript 如何找出哪个DOM元素具有焦点?
我想在JavaScript中找出当前有焦点的元素。我一直在搜索DOM,但还没有找到我需要的东西。有没有办法做到这一点,如何做到 我找这个的原因是: 我正在尝试使用箭头键和Javascript 如何找出哪个DOM元素具有焦点?,javascript,dom,Javascript,Dom,我想在JavaScript中找出当前有焦点的元素。我一直在搜索DOM,但还没有找到我需要的东西。有没有办法做到这一点,如何做到 我找这个的原因是: 我正在尝试使用箭头键和enter键在输入元素表中导航。选项卡现在可以工作了,但输入,默认情况下箭头似乎不起作用。我已经设置了密钥处理部分,但现在我需要弄清楚如何在事件处理函数中转移焦点。使用,所有主要浏览器都支持它 以前,若您试图找出哪个表单字段具有焦点,那个么您不能。要在旧浏览器中模拟检测,请向所有字段添加“焦点”事件处理程序,并在变量中记录最后一
enter
键在输入元素表中导航。选项卡现在可以工作了,但输入,默认情况下箭头似乎不起作用。我已经设置了密钥处理部分,但现在我需要弄清楚如何在事件处理函数中转移焦点。使用,所有主要浏览器都支持它
以前,若您试图找出哪个表单字段具有焦点,那个么您不能。要在旧浏览器中模拟检测,请向所有字段添加“焦点”事件处理程序,并在变量中记录最后一个焦点字段。添加一个“模糊”处理程序,在最后一个聚焦字段发生模糊事件时清除变量
如果需要删除activeElement
,可以使用blur<代码>document.activeElement.blur()。它会将activeElement
更改为body
相关链接:
document.activeElement
编辑:看来IE并没有什么错,毕竟这是HTML5草案的一部分,似乎至少得到了最新版本的Chrome、Safari和Firefox的支持。只是把它放在这里,给出我最终想出的解决方案 我创建了一个名为document.activeInputArea的属性,并使用jQuery的热键插件捕获箭头键、tab键和enter键的键盘事件,还创建了一个事件处理程序,用于单击输入元素 然后,每次焦点改变时,我都会调整activeInputArea,这样我就可以使用该属性找出我所在的位置
但是,很容易搞糟这一点,因为如果系统中有一个bug,而焦点不在您认为的位置,那么很难恢复正确的焦点。我在Mootools中使用的一个小助手:
FocusTracker = {
startFocusTracking: function() {
this.store('hasFocus', false);
this.addEvent('focus', function() { this.store('hasFocus', true); });
this.addEvent('blur', function() { this.store('hasFocus', false); });
},
hasFocus: function() {
return this.retrieve('hasFocus');
}
}
Element.implement(FocusTracker);
通过这种方式,您可以使用
el.hasFocus()
检查元素是否具有焦点,前提是对给定元素调用了startFocusTrack()
我喜欢Joel S使用的方法,但我也喜欢document.activeElement
的简单性。我使用jQuery并将两者结合起来。不支持document.activeElement
的旧浏览器将使用jQuery.data()
存储“hasFocus”的值。较新的浏览器将使用document.activeElement
。我假设document.activeElement
将具有更好的性能
(function($) {
var settings;
$.fn.focusTracker = function(options) {
settings = $.extend({}, $.focusTracker.defaults, options);
if (!document.activeElement) {
this.each(function() {
var $this = $(this).data('hasFocus', false);
$this.focus(function(event) {
$this.data('hasFocus', true);
});
$this.blur(function(event) {
$this.data('hasFocus', false);
});
});
}
return this;
};
$.fn.hasFocus = function() {
if (this.length === 0) { return false; }
if (document.activeElement) {
return this.get(0) === document.activeElement;
}
return this.data('hasFocus');
};
$.focusTracker = {
defaults: {
context: 'body'
},
focusedElement: function(context) {
var focused;
if (!context) { context = settings.context; }
if (document.activeElement) {
if ($(document.activeElement).closest(context).length > 0) {
focused = document.activeElement;
}
} else {
$(':visible:enabled', context).each(function() {
if ($(this).data('hasFocus')) {
focused = this;
return false;
}
});
}
return $(focused);
}
};
})(jQuery);
从当前开始,JQuery确实支持
:focus
伪类。如果您要在JQuery文档中查找它,请在“选择器”下选中,它会将您指向。我已经用Chrome、FF和IE 7+进行了测试。请注意,要想在IE中工作,阅读其他答案并亲自尝试,似乎document.activeElement
将为您提供大多数浏览器所需的元素
如果您的浏览器不支持document.activeElement,如果您周围有jQuery,您应该能够使用非常简单的方法在所有焦点事件上填充它(未经测试,因为我手头没有满足这些条件的浏览器):
如果您可以使用jQuery,它现在支持:focus,只需确保您使用的是1.6+版本
此语句将获得当前关注的元素
$(":focus")
From:document.activeElement
现在是规范,但在一些非主流/移动/旧浏览器中可能还不支持它。您可以返回到查询选择器
(如果支持的话)。还值得一提的是,如果没有聚焦元素,即使浏览器窗口没有聚焦,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
属性慢得多。请参见此图。对于dojo,您可以使用dijit.getFocus()如果您使用的是jQuery,您可以使用它来确定元素是否处于活动状态:
$("input#id").is(":active");
如果焦点中没有可聚焦的元素,则document.activeElement
可能默认为
元素。此外,如果某个元素被聚焦并且浏览器窗口模糊,activeElement
将继续保持聚焦的元素
$(":focus")
如果这两种行为中的任何一种都不可取,请考虑基于CSS的方法:<代码>文档> QuestS选择器(':Copy')>
使用Debug .ActuvEngEnter可能存在问题。考虑:
<div contentEditable="true">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>
如果您希望获得重点元素,请使用:
function active_element(){
var anchor = window.getSelection().anchorNode;
if(anchor.nodeType == 3){
return anchor.parentNode;
}else if(anchor.nodeType == 1){
return anchor;
}
}
如果要获取的对象是元素的实例
,则必须使用document.activeElement
,但如果要获取的对象是文本的实例
,则必须使用document.getSelection().focusNode
我希望能有所帮助。如果文档没有聚焦(因此文档中没有任何内容是聚焦的!),则document.activeElement本身仍然可以返回元素
您可能想要这种行为,或者它可能无关紧要(例如,在按键按下事件中),但如果您需要知道某些内容实际上是聚焦的,您可以另外进行检查
以下内容将为您提供聚焦元素(如果有),或者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
);
稳健性说明:在
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
);
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;
});
setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);