En este post te mostraré a enfocar o darle focus a un elemento de un formulario de HTML usando JavaScript, ya sea un input o un textarea.
Enfocar un elemento en JavaScript es hacer que, cuando el usuario comience a escribir usando el teclado, el texto aparezca en el campo de texto, en pocas palabras que se enfoque el input o textarea.
Para esto vamos a usar querySelector, pues necesitamos una referencia al DOM.
En resumen, para darle focus a un elemento con JavaScript, invocamos al método llamado focus
en el input
o elemento.
Por ejemplo:
$elemento.focus();
Veremos un ejemplo a continuación.
Definimos nuestro input y le ponemos un id para obtenerlo más tarde. El HTML queda así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Focus con JS</title>
</head>
<body>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<input id="nombre" placeholder="Escribe tu nombre">
<br><br>
<button id="btnEnfocar">Enfocar</button>
<script src="script.js"></script>
</body>
</html>
Tenemos dos elementos principales, aunque solo nos importa el input.
Existe el input con el id nombre,
y el botón con en id btnEnfocar
. En el click del botón vamos a enfocar el input usando JavaScript.
El código de JavaScript queda así:
const $btnEnfocar = document.querySelector("#btnEnfocar"),
$nombre = document.querySelector("#nombre");
// En el click, enfocar
$btnEnfocar.addEventListener("click", () => {
$nombre.focus();
});
Simplemente usamos querySelector para obtener una referencia al input
, y en el click del botón llamamos a focus
del elemento $nombre
.
Así como se puede enfocar un input también se pueden enfocar otros elementos, solo se debe obtener una referencia a cada elemento.
Recuerda que si quieres que el focus sea automático debes usar el atributo autofocus.
Te invito a leer más sobre JavaScript aquí.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.