Comment puis-je savoir quel élément du DOM a le focus ?

Question

Je voudrais savoir, en JavaScript, quel élément a actuellement le focus. J'ai parcouru le DOM et je n'ai pas encore trouvé ce dont j'ai besoin. Existe-t-il un moyen de le faire, et comment ?

La raison pour laquelle je cherchais ça :

J'essaye de faire en sorte que les touches comme les flèches et les enter naviguer dans un tableau d'éléments d'entrée. La tabulation fonctionne maintenant, mais l'entrée et les flèches ne fonctionnent pas par défaut, semble-t-il. J'ai mis en place la partie de gestion des touches, mais je dois maintenant trouver comment déplacer le focus dans les fonctions de gestion des événements.

Answer 1

Utilice document.activeElement il est pris en charge par tous les principaux navigateurs.

Auparavant, si vous essayiez de savoir quel champ de formulaire avait le focus, vous ne pouviez pas le faire. Pour émuler la détection dans les anciens navigateurs, ajoutez un gestionnaire d'événement "focus" à tous les champs et enregistrez le dernier champ ciblé dans une variable. Ajoutez un gestionnaire d'événement "blur" pour effacer la variable en cas d'événement blur pour le dernier champ ciblé.

Si vous devez retirer le activeElement vous pouvez utiliser le flou ; document.activeElement.blur() . Il changera le activeElement a body .

Liens connexes :

• Compatibilité avec le navigateur activeElement
• Alternative jQuery pour document.activeElement

Answer 2

Comme l'a dit JW, vous ne pouvez pas trouver l'élément actuellement ciblé, du moins d'une manière indépendante du navigateur. Mais si votre application est uniquement IE (certaines le sont...), vous pouvez le trouver de la manière suivante :

document.activeElement

Il semble qu'IE n'avait pas tout faux après tout, cela fait partie du projet HTML5 et semble être pris en charge par la dernière version de Chrome, Safari et Firefox au moins.

Answer 3

Si vous pouvez utiliser jQuery, il prend désormais en charge :focus, assurez-vous simplement que vous utilisez la version 1.6+.

Cette déclaration vous permettra d'obtenir l'élément actuellement ciblé.

$(":focus")

De : Comment sélectionner un élément qui a le focus sur lui avec jQuery ?

Answer 4

document.activeElement est maintenant fait partie du projet de travail HTML5 mais il se peut qu'elle ne soit pas encore prise en charge par certains navigateurs non majeurs/mobiles/anciens. Vous pouvez vous rabattre sur querySelector (si cela est possible). Il convient également de mentionner que document.activeElement retournera document.body si aucun élément n'est focalisé - même si la fenêtre du navigateur n'a pas le focus.

Le code suivant permet de contourner ce problème et de revenir à l'option querySelector donnant un peu plus de soutien.

var focused = document.activeElement;
if (!focused || focused == document.body)
    focused = null;
else if (document.querySelector)
    focused = document.querySelector(":focus");

Il convient également de noter la différence de performances entre ces deux méthodes. L'interrogation du document avec des sélecteurs sera toujours beaucoup plus lente que l'accès au fichier activeElement propriété. Voir ce test jsperf.com .

Answer 5

J'ai aimé l'approche utilisée par Joel S, mais j'aime également la simplicité de document.activeElement . J'ai utilisé jQuery et combiné les deux. Les anciens navigateurs qui ne supportent pas document.activeElement utilisera jQuery.data() pour stocker la valeur de "hasFocus". Les navigateurs plus récents utiliseront document.activeElement . Je suppose que document.activeElement aura de meilleures performances.

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