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

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

Simplemente usamos querySelector para obtener una referencia al input, y en el click del botón llamamos a focus del elemento $nombre.

Puedes probar el código aquí.

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

Apoya al sitio

¿Mi artículo te ha resultado útil? haz una donación.

Relacionado:  querySelector y querySelectorAll en JavaScript
También pudes suscribirte a mi boletín semanal en la parte de abajo

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 330 suscriptores


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/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: