web-dev-qa-db-fra.com

Comment puis-je vérifier si mon ID d'élément a le focus?

Disons que j'ai la div suivante qui obtient le focus après qu'une certaine condition est remplie:

<div id="myID" tabindex="-1" >Some Text</div>

Je veux créer un gestionnaire qui vérifie si cette div a le focus ou non, et quand il est évalué comme étant vrai/le focus est sur la div, faites quelque chose (dans l'exemple ci-dessous, imprimez un journal de la console):

if (document.getElementById('#myID').hasFocus()) {
            $(document).keydown(function(event) {
                if (event.which === 40) {
                    console.log('keydown pressed')
                }
            });
        }

Je reçois un message d'erreur dans la console qui dit:

TypeError: Impossible de lire la propriété 'hasFocus' de null

Une idée de ce que je fais mal ici? Peut-être que je passe le div Id?

javascriptjqueryhtml
59
Kode_12

Comparez document.activeElement avec l'élément que vous souhaitez vérifier pour le focus. S'ils sont identiques, l'élément est ciblé. sinon ce n'est pas le cas.

_// dummy element
var dummyEl = document.getElementById('myID');

// check for focus
var isFocused = (document.activeElement === dummyEl);
_

hasFocus fait partie de document; Il n'y a pas une telle méthode pour les éléments DOM.

De plus, _document.getElementById_ n'utilise pas un _#_ au début de myID. Change ça:

_var dummyEl = document.getElementById('#myID');
_

pour ça:

_var dummyEl = document.getElementById('myID');
_

Si vous souhaitez plutôt utiliser une requête CSS, vous pouvez utiliser querySelector (et querySelectorAll ).

99
Florrie

Si vous voulez utiliser jquery $("..").is(":focus").

Vous pouvez jeter un oeil à ceci pile

12
Michael

Utilisez document.activeElement

Devrait marcher.

P.S getElementById("myID") pas getElementById("#myID")

11
Oen44

Il s’agit d’un élément de bloc. Pour qu’il puisse recevoir le focus, vous devez lui ajouter un attribut tabindex, comme dans

<div id="myID" tabindex="1"></div>

Tabindex permettra à cet élément de recevoir le focus. Utilisez tabindex="-1" (ou supprimez l'attribut) pour interdire ce comportement.

Et puis vous pouvez simplement

if ($("#myID").is(":focus")) {...}

Ou utilisez le

$(document.activeElement)

Comme suggéré précédemment.

3
Eihwaz