En este artículo, discutiremos cómo devolver el elemento actualmente activo en un documento HTML. Usaremos la propiedad DOM activeElement que nos ayudará a lograrlo. La propiedad DOM activeElement se utiliza para devolver los elementos actualmente activos en el documento HTML. Esta propiedad es de sólo lectura. Nos proporciona una referencia a un objeto de elemento enfocado en el documento.
Sintaxis:
document.activeElement
Ejemplo 1: en este ejemplo, devolveremos el nombre de la etiqueta que está actualmente activa.
HTML
<!DOCTYPE html>
<html lang="en">
<body onclick="clickedActiveElement()">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>How to return the currently active
elements in the HTML document?
</b>
<br /><br />
<input type="text"
placeholder="I am input" />
<br /><br />
<button>This is a button</button>
<br />
<h2 id="result"></h2>
</center>
<script>
function clickedActiveElement() {
// Get the active element
var isActive =
document.activeElement.tagName;
// Output the active element to the result
var element =
document.getElementById('result');
element.innerHTML =
"Active Element is: " + isActive;
element.style.color =
"green";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, devolveremos la identificación del elemento que está activo actualmente.
HTML
<!DOCTYPE html>
<html lang="en">
<body id="body-id" onclick="clickedActiveElement()">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>How to return the currently active
belements in the HTML document?
</b>
<br /><br />
<input type="text"
placeholder="I am input"
id="input-text-id" />
<br /><br />
<input type="checkbox"
id="input-checkbox-id" />
CheckBox
<br /><br />
<button id="button-id">Button</button>
<br />
<h2 id="result"></h2>
</center>
<script>
function clickedActiveElement() {
// Get the active element's ID
var activeElementId =
document.activeElement.id;
// Output the ID to the result
var element =
document.getElementById('result');
element.innerHTML =
"Active Element is: " + activeElementId;
element.style.color =
"green";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA