Comment savoir quel élément DOM est ciblé?

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'avais besoin. Y a-t-il un moyen de le faire et comment?

La raison pour laquelle je cherchais ceci:

J'essaie de créer des touches comme les flèches et de enterparcourir une table d'éléments d'entrée. Tab fonctionne maintenant, mais entrez, et les flèches ne le semblent pas par défaut. J'ai mis en place la partie de gestion des clés, mais maintenant je dois comprendre comment déplacer le focus dans les fonctions de gestion des événements.

Utilisez document.activeElement, il est pris en charge dans tous les principaux navigateurs.

Auparavant, si vous essayiez de savoir quel champ de formulaire était ciblé, vous ne pouviez pas. Pour émuler la détection dans des navigateurs plus anciens, ajoutez un gestionnaire d'événements "focus" à tous les champs et enregistrez le dernier champ focalisé dans une variable. Ajoutez un gestionnaire de "flou" pour effacer la variable lors d'un événement de flou pour le dernier champ focalisé.

Si vous devez supprimer le, activeElementvous pouvez utiliser le flou; document.activeElement.blur(). Il va changer activeElementà body.

Liens connexes:

• Compatibilité du navigateur activeElement
• Alternative à jQuery pour document.activeElement

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

document.activeElement

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

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 donnera l'élément actuellement ciblé.

$(":focus")

De: Comment sélectionner un élément qui se concentre dessus avec jQuery

document.activeElementfait maintenant partie de la spécification de brouillon HTML5 , mais elle n'est peut-être pas encore prise en charge dans certains navigateurs non majeurs / mobiles / plus anciens. Vous pouvez revenir à querySelector(si cela est pris en charge). Il convient également de mentionner que document.activeElementcela reviendra document.bodysi aucun élément n'est focalisé - même si la fenêtre du navigateur n'a pas le focus.

Le code suivant contournera ce problème et se rabattra sur querySelectorun meilleur support.

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

Une autre chose à noter est 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 à la activeElementpropriété. Voir ce test jsperf.com .

En soi, document.activeElementpeut toujours renvoyer un élément si le document n'est pas focalisé (et donc rien dans le document n'est focalisé!)

Vous voudrez peut -être ce comportement, ou il peut ne pas avoir d'importance (par exemple dans un keydownévénement), mais si vous avez besoin de savoir que quelque chose est réellement concentré, vous pouvez également vérifier document.hasFocus().

Ce qui suit vous donnera l'élément focalisé s'il y en a un, ou bien null.

var focused_element = null;
if (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
) {
    focused_element = document.activeElement;
}

Pour vérifier si un élément spécifique a le focus, c'est plus simple:

var input_focused = document.activeElement === input && document.hasFocus();

Pour vérifier si quelque chose est ciblé, c'est encore plus complexe:

var anything_is_focused = (
    document.hasFocus() &&
    document.activeElement !== null &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
);

Remarque sur la robustesse : dans le code dans lequel il vérifie document.bodyet document.documentElement, c'est parce que certains navigateurs retournent l'un d'eux ou nulllorsque rien n'est focalisé.

Il ne prend pas en compte si le <body>(ou peut-être <html>) avait un tabIndexattribut et pouvait donc être réellement concentré . Si vous écrivez une bibliothèque ou quelque chose et que vous voulez qu'elle soit robuste, vous devriez probablement gérer cela d'une manière ou d'une autre.

Voici une version ( one-liner) ( lourd airquotes) pour obtenir l'élément focalisé, ce qui est conceptuellement plus compliqué parce que vous devez connaître les courts-circuits, et vous savez, cela ne tient évidemment pas sur une seule ligne, en supposant que vous veulent qu'il soit lisible.
Je ne recommanderai pas celui-ci. Mais si vous êtes un 1337 hax0r, idk ... il est là.
Vous pouvez également retirer la || nullpièce si cela ne vous dérange pas d'obtenir falsedans certains cas. (Vous pouvez toujours obtenir nullsi document.activeElementest null):

var focused_element = (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement &&
    document.activeElement
) || null;

Pour vérifier si un élément spécifique est ciblé, vous pouvez également utiliser des événements, mais cette méthode nécessite une configuration (et éventuellement un démontage) et, surtout, suppose un état initial :

var input_focused = false;
input.addEventListener("focus", function() {
    input_focused = true;
});
input.addEventListener("blur", function() {
    input_focused = false;
});

Vous pouvez corriger l'hypothèse de l'état initial en utilisant la méthode sans événement, mais vous pourriez aussi bien l'utiliser à la place.

document.activeElementpeut par défaut être l' <body>élément si aucun élément focalisable n'est au point. De plus, si un élément est mis au point et que la fenêtre du navigateur est floue, activeElementil continuera de contenir l'élément mis au point.

Si l' une de ces deux comportements ne sont pas souhaitables, envisager une approche basée sur CSS: document.querySelector( ':focus' ).

J'ai aimé l'approche utilisée par Joel S, mais j'aime aussi la simplicité de document.activeElement. J'ai utilisé jQuery et combiné les deux. Les navigateurs plus anciens qui ne prennent pas en charge document.activeElementutiliseront jQuery.data()pour stocker la valeur de «hasFocus». Les nouveaux navigateurs utiliseront document.activeElement. Je suppose que document.activeElementcela 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);

Un petit assistant que j'ai utilisé à ces fins dans 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);

De cette façon, vous pouvez vérifier si l'élément a le focus à el.hasFocus()condition d' startFocusTracking()avoir été appelé sur l'élément donné.

JQuery prend en charge la :focuspseudo-classe en cours. Si vous le recherchez dans la documentation JQuery, vérifiez sous "Sélecteurs" où il vous pointe vers les documents CSS du W3C . J'ai testé avec Chrome, FF et IE 7+. Notez que pour qu'il fonctionne dans IE, il <!DOCTYPE...doit exister sur la page html. Voici un exemple en supposant que vous avez attribué un identifiant à l'élément qui a le focus:

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

Si vous voulez obtenir un objet qui est une instance de Element, vous devez utiliser document.activeElement, mais si vous voulez obtenir un objet qui est une instance de Text, vous devez utiliser document.getSelection().focusNode.

J'espère que ça aide.

Il existe des problèmes potentiels avec l'utilisation de document.activeElement. Considérer:

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

Si l'utilisateur se concentre sur un div interne, document.activeElement fait toujours référence au div externe. Vous ne pouvez pas utiliser document.activeElement pour déterminer lequel des div internes a le focus.

La fonction suivante contourne cela et renvoie le nœud focalisé:

function active_node(){
  return window.getSelection().anchorNode;
}

Si vous préférez obtenir l'élément ciblé, utilisez:

function active_element(){
  var anchor = window.getSelection().anchorNode;
  if(anchor.nodeType == 3){
        return anchor.parentNode;
  }else if(anchor.nodeType == 1){
        return anchor;
  }
}

J'ai trouvé l'extrait de code suivant utile pour essayer de déterminer quel élément a actuellement le focus. Copiez ce qui suit dans la console de votre navigateur, et chaque seconde il imprimera les détails de l'élément courant qui a le focus.

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

N'hésitez pas à modifier le console.logpour vous déconnecter de quelque chose de différent afin de vous aider à localiser l'élément exact si l'impression de l'élément entier ne vous aide pas à localiser l'élément.

En lisant d'autres réponses et en essayant moi-même, cela document.activeElementvous donnera l'élément dont vous avez besoin dans la plupart des navigateurs.

Si vous avez un navigateur qui ne prend pas en charge document.activeElement si vous avez jQuery autour, vous devriez pouvoir le remplir sur tous les événements de focus avec quelque chose de très simple comme ceci (non testé car je n'ai pas de navigateur répondant à ces critères à portée de main ):

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

Si vous utilisez jQuery, vous pouvez l'utiliser pour savoir si un élément est actif:

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

Avec dojo, vous pouvez utiliser dijit.getFocus ()

Je mets juste cela ici pour donner la solution que j'ai finalement trouvée.

J'ai créé une propriété appelée document.activeInputArea, et utilisé l'addon HotKeys de jQuery pour intercepter les événements de clavier pour les touches fléchées, tabulation et entrée, et j'ai créé un gestionnaire d'événements pour cliquer sur les éléments d'entrée.

Ensuite, j'ai ajusté activeInputArea chaque fois que le focus changeait, afin que je puisse utiliser cette propriété pour savoir où j'étais.

Cependant, il est facile de gâcher cela, car si vous avez un bogue dans le système et que la mise au point n'est pas là où vous pensez, il est très difficile de restaurer la mise au point correcte.