Cuando el usuario interactúa con los elementos HTML , HTML tiene la capacidad de permitir que los eventos desencadenen acciones en un navegador, como que un usuario haga clic en un elemento, se enfoque dentro o fuera de un elemento, etc. Los eventos relacionados con el enfoque están contenidos dentro del objeto DOM FocusEvent . El foco se activará cuando un elemento esté enfocado en HTML.
El evento DOM onfocus ocurre en el momento en que un elemento está enfocado. Las etiquetas con las que se utiliza mayoritariamente el evento onfocus son <a> , <select> y <input> . Las etiquetas admitidas por el evento HTML DOM onfocus son todas las etiquetas excepto <html> , <param> , <script> , <title> , <style> , <meta> , <head> , <br> , <iframe> , <base > , <bdo> .
Nota: La forma en que el evento onfocus es diferente del evento onfocusin es que el anterior no burbujea.
Sintaxis:
Usando el método addEventListener():
Element.addEventListener("focus",function(cb){});
Usando en HTML:
<element onfocus="functionFocus">
Ejemplo 1: en este ejemplo, cuando el elemento de entrada está enfocado, su contorno se elimina y obtiene un borde de color negro. Además, un mensaje indica cuándo el elemento está enfocado y cuándo está desenfocado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<style>
.container {
background-color: green;
height: 200px;
width: 400px;
font-size: 18px;
text-align: center;
color: whitesmoke;
margin: auto;
font-family: 'Courier New', Courier, monospace;
}
input {
height: 35px;
width: 250px;
outline: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>GeeksforGeeks</h2>
<input type="text">
</div>
<script>
let container = document.querySelector(".container");
let input = document.querySelector("input");
let addP = document.createElement("p");
let removedP = document.createElement("p");
input.addEventListener("focus", function(e) {
addP.innerText = "The input element is in focus";
container.appendChild(addP);
input.style.border = "2px solid black";
input.style.outline = "none";
});
input.addEventListener("blur", function(e) {
container.removeChild(addP);
removedP.textContent = "The input element is out of focus";
container.appendChild(removedP);
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, cuando el usuario hace clic en el enlace dado, el elemento de anclaje se enfoca y su color cambia al color especificado «#C197D2» cuando está en foco.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
<style>
.container {
background-color: green;
height: 150px;
width: 450px;
font-size: 22px;
font-weight: bolder;
text-align: center;
color: whitesmoke;
margin: auto;
}
p:nth-child(2n) {
color: black;
}
a {
color: whitesmoke;
}
</style>
</head>
<body>
<div class="container">
<p>GeeksforGeeks</p>
<p>Click here to visit <a href="https://www.geeksforgeeks.org/">
GeeksforGeeks</a>website </p>
</div>
<script>
let a = document.querySelector("a");
a.addEventListener("focus", function(e) {
a.style.color = "#C197D2";
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA