javascript - 动态修改title - 如何找出哪个DOM元素具有焦点?




js设置页面标题 (12)

JQuery支持:focus当前的:focus伪类。 如果您正在JQuery文档中查找它,请在“选择器”下找到指向W3C CSS文档的位置 。 我已经使用Chrome,FF和IE 7+进行了测试。 请注意,要在IE中工作, <!DOCTYPE...必须存在于html页面上。 假设你已经为拥有焦点的元素分配了一个id,这里是一个例子:

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

我想在Javascript中找出哪些元素当前有重点。 我一直在浏览DOM,但还没有找到我需要的东西。 有没有办法做到这一点,以及如何?

我一直在寻找的原因是:

我正在尝试制作箭头之类的按键,然后通过输入元素的表格进行导航。 Tab现在可以工作,但输入和箭头似乎并不默认。 我已经设置了关键处理部分,但现在我需要弄清楚如何在事件处理功能中移动焦点。


Quirksmode很早以前就采用了几乎独立于浏览器的方式来实现这一目标。 Safari可能会遇到问题,因为Safari并不总是将事件设置为与Chrome或Firefox相同的元素。 有时Safari甚至会在textnode而不是包含元素上设置事件。 这可以在课程之后纠正(通过检查nodeType)。

这里是:

  function getFocus(e){
    var focused;
    if (!e) var e = window.event;
    if (e.target) focused = e.target;
    else if (e.srcElement) focused = e.srcElement;
    if (focused.nodeType == 3) focused = focused.parentNode;
    if (document.querySelector) {
      return focused.id;
    } else if (!focused || focused == document.documentElement) {
      return focused;
    }
  }

希望能帮助到你。

感谢Quirksmode


使用document.activeElement ,它在所有主流浏览器中都受支持。

以前,如果您试图找出表单域的重点,则不能。 要在旧版浏览器中模拟检测,请将​​“焦点”事件处理程序添加到所有字段,并将最后聚焦的字段记录到变量中。 添加一个“模糊”处理程序,以清除最后聚焦的字段模糊事件时的变量。

相关链接:


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

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

如果用户关注内部d​​iv,则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;
  }
}

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

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

如果打印出整个元素并不能帮助您查明元素,请随意修改console.log以注销一些不同的东西以帮助您确定确切的元素。


如果你使用的是jQuery,你可以使用它来找出一个元素是否处于活动状态:

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

如果你想获得一个Element实例的对象,你必须使用document.activeElement ,但是如果你想获得一个实例为Text的对象,你必须使用document.getSelection().focusNode

我希望有所帮助。


如果没有可聚焦的元素在焦点, document.activeElement可能默认为<body>元素。 此外,如果某个元素关注并且浏览器窗口模糊, activeElement将继续保留该焦点元素。

如果这两种行为中的任何一种都不可取,请考虑基于CSS的方法: document.querySelector( ':focus' )


我喜欢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);

我在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()了焦点,前提是已在给定元素上调用startFocusTracking()


通过dojo,你可以使用dijit.getFocus()


阅读其他答案,并尝试自己,似乎document.activeElement会给你在大多数浏览器中所需的元素。

如果你有一个不支持document.activeElement的浏览器,那么你应该可以在所有焦点事件上填充它,像这样非常简单(未经测试,因为我没有满足这些标准的浏览器) ):

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






dom