Escuchar cambios en un input desde JavaScript es muy útil cuando queremos declarar comportamientos lógicos y reacciones en un formulario. Por ello, aprender a ejecutar este ejercicio es fundamental para la interacción de nuestros proyectos con las acciones del usuario. En este post, te enseñaremos cómo escuchar cambios en un input desde JavaScript para poder reaccionar a ellos.
¿Cómo escuchar cambios en un input desde JavaScript?
Existen muchas maneras de escuchar cambios en un input desde JavaScript. Sin embargo, la forma en la que nos aproximemos a programar esta lógica dependerá de cómo queramos que se comporte nuestro formulario.
Supongamos que tenemos una etiqueta form de tres input, como la que hemos creado en nuestro post sobre crear un formulario de registro en HTML. Ahora, queremos programar una reacción cuando los tres input tengan un valor (cuando no estén vacíos).
Para ejecutar lo anterior, debemos escuchar los cambios de todos los input de nuestro formulario, pues queremos reaccionar solo cuando todos estén llenos. Entonces, deberemos definir un evento para cada uno de los input. Para ello, primero deberemos seleccionar todos nuestros input usando el método para seleccionar nodos del DOM querySelectorAll.
A continuación, te mostramos esta primera acción como parte de una función que hemos llamado suscribeToEvents ( ), que en nuestro caso forma parte del controlador SignupController, responsable de otorgarle la lógica JavaScript a este nodo HTML form.
suscribeToEvents ( ) {
const inputElements = this.formElement.querySelectorAll (‘input’)
}
Ahora que tenemos nuestros nodos seleccionados, el siguiente paso es recorrer el objeto que nos devuelve querySelectorAll y aplicarle un evento a cada uno de los elementos de este objeto. ¿Por qué? Pues porque cada uno de ellos debe ser escuchado para así poder hacer la validaciones subsecuentes. Es decir, cada vez que uno de nuestros input se actualice, deberemos revisar si los demás también tienen actualizaciones.
Para recorrer un objeto y aplicar un método a cada uno de sus elementos, utilizaremos el método forEach en JavaScript. Este método recibirá nuestro inputElement y le aplicará un evento a cada uno. A continuación, te mostramos las líneas de código que hemos agregado a nuestra función suscribeToEvents:
suscribeToEvents ( ) {
const inputElements = this.formElement.querySelectorAll (‘input’)
inputElements.forEach ((inputElement) => {
inputElement.addEventListener (‘input’, ( ) => {
// acción a ejecutar
})
});
}
Puedes notar que dentro del evento que le hemos aplicado a cada input hemos determinado un evento ‘input’. Como puedes leer en el artículo evento input de la página oficial de Mozilla Developer Network, este evento se dispara cuando ocurre algún cambio en el valor (propiedad value) de un input, textarea o select.
Tras el evento, el método addEventListener recibe un segundo parámetro que debe declarar la acción a ejecutar. Es aquí donde podrás definir la reacción ante un cambio en tu input. Por ahora, nosotros simplemente ejecutaremos un console.log para comprobar el funcionamiento de nuestro evento en la consola de nuestro inspector.
suscribeToEvents ( ) {
const inputElements = this.formElement.querySelectorAll (‘input’)
inputElements.forEach ((inputElement) => {
inputElement.addEventListener (‘input’, ( ) => {
console.log (‘input cambia’)
})
});
}
De esta manera, con la definición de un evento input a cada uno de los input de nuestro formulario, podemos determinar la lógica que queramos. En el caso de que quieras reaccionar a que todos los input hayan cambiado, tendrás que utilizar el método every o some. Sin embargo, para ello tendrás que hacer un pequeño cambio. Al revisar lo que devuelve el método querySelectorAll, verás que esto no es un array, sino un NodeList. Por ello, para utilizar cualquier método de modificación de array, primero deberás transformar los input seleccionados usando el comando array.from.
Ahora que sabes cómo escuchar cambios en un input desde JavaScript, puedes declarar reacciones a dichos cambios. Una de las reacciones comunes es habilitar el envío del formulario cuando todos los input tengan cambios. Para aprender cómo ejecutar esto, te invitamos a leer nuestro post sobre habilitar botón al rellenar formulario en JavaScript.
Ahora que sabes cómo escuchar cambios en un input desde JavaScript, ¡es el momento de emplear este conocimiento para controlar el comportamiento de tus propios formularios! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar tus propias líneas de código con diversas herramientas y lenguajes fundamentales para la web como JavaScript, HTML y CSS. ¡No te lo pierdas y solicita ahora más información!
