How do I find out which DOM element has the focus?

后端 未结 16 1219
悲&欢浪女
悲&欢浪女 2020-11-22 03:12

I would like to find out, in JavaScript, which element currently has focus. I\'ve been looking through the DOM and haven\'t found what I need, yet. Is there a way to do this

相关标签:
16条回答
  • 2020-11-22 03:52

    A little helper that I've used for these purposes in 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);
    

    This way you can check if element has focus with el.hasFocus() provided that startFocusTracking() has been called on the given element.

    0 讨论(0)
  • 2020-11-22 03:55

    With dojo, you can use dijit.getFocus()

    0 讨论(0)
  • 2020-11-22 03:57

    document.activeElement may default to the <body> element if no focusable elements are in focus. Additionally, if an element is focused and the browser window is blurred, activeElement will continue to hold the focused element.

    If either of these two behaviors are not desirable, consider a CSS-based approach: document.querySelector( ':focus' ).

    0 讨论(0)
  • 2020-11-22 03:57

    I liked the approach used by Joel S, but I also love the simplicity of document.activeElement. I used jQuery and combined the two. Older browsers that don't support document.activeElement will use jQuery.data() to store the value of 'hasFocus'. Newer browsers will use document.activeElement. I assume that document.activeElement will have better performance.

    (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);
    
    0 讨论(0)
提交回复
热议问题