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í.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.