Flujo de eventos focus – input – change

En este post anterior vimos como modificar la apariencia de una imagen usando la propiedad transform de CSS y unos input de tipo range.

Tras el post me han preguntado cómo se podía hacer para que la imagen se modificara mientras movemos el slider y no al final, cuando soltábamos el botón.

Existen varias formas pero con jQuery podemos hacerlo de manera muy sencilla, lo importante es que debemos distinguir entre tres eventos:

  • El evento focus que es el que sucede cuando seleccionamos el control del formulario. Al hacer el primer click en él.
  • El evento input que es el que sucede cuando estamos moviendo el campo de tipo range o cuando estamos insertando valor en cualquier otro input
  • El evento change que es cuando soltamos el slider en un campo range o cuando validamos el valor del campo.

De hecho el flujo normal de eventos cuando seleccionamos un input y lo deslizamos es el siguiente.

Focus - Input - Change

Podemos ver ambos eventos funcionando en el siguiente CodePen:

See the Pen Focus – Input – Change by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Puedes descargar el ejemplo completo aquí.

Hasta el próximo post. Os recuerdo que estoy abierto a propuestas para abrir nuevas series de tutoriales y/o ejemplos.