El lenguaje de marcado de hipertexto (HTML) es el componente básico de las páginas web que define una estructura. Los navegadores utilizan este lenguaje de marcado para manipular datos como texto, imágenes y otro contenido para que puedan mostrarse en el formato requerido. Hipertexto se refiere a los enlaces que conectan las páginas web y el marcado define el documento de texto dentro de las etiquetas.
¿Cómo enfocar el elemento mientras carga la página en HTML?
Queremos que un elemento esté enfocado cada vez que cargamos la página. Esto lo podemos hacer de 2 formas:
- Usando el atributo de enfoque automático del elemento.
- Uso de la ventana: evento de carga .
Exploremos ambas formas con ejemplos.
1. Uso del atributo de enfoque automático El atributo de enfoque automático es un atributo booleano , es decir, solo puede ser verdadero o falso. Cuando este atributo está presente dentro de un elemento, especifica que el elemento dentro del cual está presente debe enfocarse automáticamente cada vez que se carga la página.
El atributo de enfoque automático solo se puede usar dentro de los elementos mencionados a continuación:
- <entrada>
- <botón>
- <área de texto>
- <seleccionar>
Sintaxis:
<elementName autofocus>
Ejemplo: en este ejemplo, cada vez que se carga la página, el elemento de entrada recibe el foco y podemos verlo como el color de fondo de la entrada cambia a #8ecae6.
HTML
<!DOCTYPE html> <html> <head> <title>Using autofocus attribute</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p>GeeksforGeeks</p> <input type="text" placeholder= "Hey Geeks, Type something here" autofocus> </div> </body> </html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
margin: auto;
margin-top: 10px;
height: 100px;
width: 300px;
background-color: green;
text-align: center;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
p {
padding-top: 15px;
color: whitesmoke;
}
input {
margin-top: 15px;
width: 75%;
color: black;
font-weight: bolder;
}
input:focus {
background-color: #8ecae6;
}
Producción:
2. Uso de la ventana: evento de carga: el evento de carga del objeto de la ventana se activa cuando se ha cargado la página completa, incluidas las hojas de estilo y las imágenes. Ahora, cuando la página se ha cargado, podemos usar el método HTMLElement.focus() para enfocar nuestro elemento (si se puede enfocar). El elemento enfocado es el que recibe eventos de teclado y similares por defecto.
Sintaxis:
HTMLElement.focus();
El método focus() puede tener un parámetro opcional que es un objeto que proporciona opciones para controlar aspectos del proceso de enfoque.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Using load event</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p>GeeksforGeeks</p> <input type="text" placeholder= "Hey Geeks, Type something here"> </div> <script src="script.js"></script> </body> </html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
margin: auto;
margin-top: 10px;
height: 100px;
width: 300px;
background-color: green;
text-align: center;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
p {
padding-top: 15px;
color: whitesmoke;
}
input {
margin-top: 15px;
width: 75%;
color: black;
font-weight: bolder;
}
input:focus {
background-color: #8ecae6;
}
Javascript
let inputElem = document.querySelector("input");
window.addEventListener('load', function(e) {
inputElem.focus();
})
Producción:
Navegadores compatibles:
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA