La proprietà activeElement in Javascript
La proprietà activeElement è una proprietà dell'oggetto document che restituisce l'elemento DOM attualmente focalizzato nella pagina.
activeElement
In pratica, restituisce l'elemento attivo nel documento E' molto utile nella costruzione di form dinamiche.
Un esempio pratico
In questa pagina web ci sono due campi di input e un paragrafo per visualizzare l'ID dell'elemento attualmente attivo.
<html>
<body>
<input type="text" id="campo1" placeholder="Campo 1">
<input type="text" id="campo2" placeholder="Campo 2">
<p>Elemento attivo: <span id="elementoAttivo">Nessuno</span></p>
<script>
document.addEventListener('focusin', function() {
// Ottiene l'ID dell'elemento attivo
var elementoAttivo = document.activeElement.id;
document.getElementById('elementoAttivo').textContent = elementoAttivo;
}, true);
</script>
</body>
</html>
Quando l'utente si sposta tra questi campi di input, l'ID dell'elemento attivo verrà mostrato nel paragrafo.
Come funziona?
Lo script ascolta l'evento "focusin" su tutto il document.
L'evento "focusin" è simile a "focus", ma a differenza di "focus", si propaga (cioè "bolla su" attraverso il DOM).
Quando un elemento riceve il focus, ottengo il suo ID tramite la proprietà document.activeElement.id e poi aggiorno il contenuto del tag span con quell'ID.
In questo modo, ogni volta che l'utente clicca su uno dei campi di input, l'ID di quel campo viene visualizzato nel paragrafo.
Esempio
Elemento attivo: Nessuno
