Come posso verificare se il mio ID elemento è attivo?

Question

Diciamo che ho il seguente div che ottiene messa a fuoco dopo una certa condizione è soddisfatta:

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

Voglio creare un gestore che controlla se o no che div ha messa a fuoco, e quando restituisce true/focus è sul div, fare qualcosa (nell'esempio che segue, stampare un log della console):

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

ricevo un messaggio di errore nella console che dice:

TypeError: Impossibile leggere la proprietà 'hasFocus 'di null

Qualche idea di cosa sto facendo male qui? Forse il modo in cui sto passando il div Id?

Answer 1

Usa document.activeElement

dovrebbe funzionare.

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

Answer 2

Se si desidera utilizzare jQuery $("..").is(":focus").

È possibile dare un'occhiata a questo stack

Answer 3

Questo è un elemento di blocco, in modo che esso sia in grado di ricevere l'attivazione, è necessario aggiungere tabindex attributo ad essa, come in

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

Tabindex consentirà a questo elemento di ricevere lo stato attivo. Utilizzare tabindex="-1" (o, in effetti, eliminare completamente l'attributo) per non consentire questo comportamento.

E allora si può semplicemente

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

Oppure utilizzare il

$(document.activeElement) 

Come suggerito in precedenza.

Answer 4

Confronta document.activeElement con l'elemento che si desidera controllare per la messa a fuoco. Se sono uguali, l'elemento è focalizzato; altrimenti, non lo è.

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

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

hasFocus fa parte del document; non esiste un tale metodo per gli elementi DOM.

Inoltre, document.getElementById non utilizza # all'inizio di myID. Modificare questa:

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

a questo:

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

Se si desidera utilizzare una query CSS invece è possibile utilizzare querySelector (e querySelectorAll).

Answer 5

Scrivi sotto il codice nello script e anche aggiungere jQuery biblioteca

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

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

Grazie ...