Jak mogę sprawdzić, czy mój identyfikator elementu ma fokus?

Question

Powiedzmy mam następujący div, który pobiera skupić po pewien warunek jest spełniony:

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

Chcę utworzyć uchwyt, który sprawdza, czy nie, że div ma fokus, a kiedy wartość true/focus jest na div, coś zrobić (w przykładzie poniżej, wydrukować dziennik konsoli):

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

dostaję komunikat o błędzie w konsoli, który mówi:

TypeError: nie można odczytać właściwość „hasFocus "o wartości zerowej

Każdy pomysł, co robię źle tutaj? Może sposób, w jaki przekazuję div id?

Answer 1

Użyj document.activeElement

Powinien działać.

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

Answer 2

Jeśli chcesz użyć jQuery $("..").is(":focus").

Można przyjrzeć się tym stack

Answer 3

To jest element bloku, tak aby była ona w stanie odbierać ostrość, trzeba dodać tabindex atrybut do niego, tak jak w

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

Tabindex pozwoli temu elementowi uzyskać fokus. Użyj tabindex="-1" (lub po prostu pozbyć się całego atrybutu), aby uniemożliwić to zachowanie.

I wtedy można po prostu

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

Albo użyć

$(document.activeElement) 

As sugerowano wcześniej.

Answer 4

Porównaj element document.activeElement z elementem, który chcesz sprawdzić ostrość. Jeśli są takie same, element jest skupiony; inaczej nie jest.

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

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

hasFocus jest częścią document; nie ma takiej metody dla elementów DOM.

Ponadto, document.getElementById nie używa # na początku myID. Zmień to:

var dummyEl = document.getElementById('#myID'); 

do tego:

var dummyEl = document.getElementById('myID'); 

Jeśli chcesz użyć kwerendy CSS zamiast można użyć querySelector (i querySelectorAll).

Answer 5

Zapis poniżej kodu w skrypcie, a także dodać biblioteki jQuery

var getElement = document.getElementById('myID'); 

if (document.activeElement === getElement) { 
     $(document).keydown(function(event) { 
      if (event.which === 40) { 
       console.log('keydown pressed') 
      } 
     }); 
    } 

Dziękuję ...