Il metodo hasFocus() di Javascript
Il metodo hasFocus() in JavaScript verifica se un elemento della pagina web ha il focus. In altre parole, controlla se l'utente sta interagendo direttamente con quell'elemento, come quando digita in un campo di testo.
hasFocus()
Questo metodo è un membro della famiglia document.
Restituisce true se qualsiasi elemento all'interno della pagina ha il focus, altrimenti restituisce false.
A cosa serve? Ha diverse applicazioni pratiche. Ad esempio, se ho un formulario su una pagina web, posso verificare se l'utente sta effettivamente lavorando all'interno di un certo campo.
Ecco un esempio pratico.
Questa pagina ha un campo di input testuale e voglio mostrare un messaggio ogni volta che questo campo ha il focus.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="testo" placeholder="Clicca qui e scrivi qualcosa...">
<p id="messaggio"></p>
<script>
// Funzione che verifica se l'elemento ha il focus
function verificaFocus() {
if (document.hasFocus() && document.getElementById("testo") === document.activeElement) {
document.getElementById("messaggio").innerHTML = "Stai scrivendo nel campo di testo!";
} else {
document.getElementById("messaggio").innerHTML = "";
}
}
// Aggiunge l'event listener al campo di testo
document.getElementById("testo").addEventListener("focus", verificaFocus);
document.getElementById("testo").addEventListener("blur", verificaFocus);
</script>
</body>
</html>
In questo documento c'è un campo di input e un paragrafo per i messaggi.
Ho definito una funzione verificaFocus() che controlla due cose: se la pagina ha il focus e se l'elemento attivo. Se entrambe le condizioni sono vere, mostra un messaggio, altrimenti il messaggio scompare.
Questo esempio utilizza anche document.activeElement per ottenere l'elemento attualmente focalizzato.
Se quell'elemento è il campo di input, allora so che l'utente sta interagendo con esso.
Nota. Il metodo hasFocus() dice solo se qualsiasi elemento nella pagina ha il focus, ma non quale elemento lo ha. Per questa ragione devo usare anche document.activeElement.
L'effetto finale è quello desiderato. Ecco come appare sulla pagina web.
