javascript

Enfocar input o textarea con JavaScript

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.

Enfocar elemento usando focus

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.

Ejemplo sencillo para enfocar input de HTML usando JavaScript

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.

Conclusión

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í.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

3 días hace

Esta web usa cookies.