En el artículo anterior vimos, el Event Binding, en este, vamos a explicar como realizar un filtro sobre un Event Binding.

Imaginaos que queremos realizar un input de texto sobre el que no podamos pulsar la tecla de retroceso ni la tecla de suprimir y mostraremos una advertencia sobre un párrafo que cambiará su color a rojo y le echará bronca al usuario.

Creando un proyecto sobre el que realizar el ejemplo

Vamos a ver un ejemplo. Para ello, creamos e iniciamos un proyecto:

Una vez creado el proyecto, nos situamos en él y lo abrimos con VCS:

Y finalmente arrancamos el proyecto:

Lo que nos abrirá una ventana con nuestra template inicial del proyecto:

Si ya tenéis un proyecto creado lo podéis reutilizar

Obteniendo la información sobre las keys pulsadas con event binding

Mediante a los eventos (event binding) hemos visto el mecanismo para hacerlo. Para ello, primero realizamos un evento y revisamos que funciona cuando nos situamos encima del input con la consola del navegador abierta:

Si escribimos un carácter es nuestro input, podemos ver que tenemos varias maneras de trabajar sobre el evento keyup:

  • code: nos muestra el carácter junto a la descripción Key, en este caso KeyA.
  • key: nos muestra el carácter en si.
  • keyCode: nos muestra el número en ASCII si pulsamos alt y escribimos el número (en este caso el 65) nos aparecerá el carácter en la pantalla (en este caso A).

Si por ejemplo queremos saber cual es el keyCode de cada una de las teclas ya sabemos como sacarlo, con el console log tal y como lo tenemos, solamente tendremos que buscarlo desde la consola y finalmente desplegar el evento de KeyboardEvent.

Ejemplo de Event binding con keyCode

Si lo hacemos con keyCode, el resultado será:

Ejemplo de Event binding con key

También podemos usar directamente el key en vez del keyCode. Vamos a ver un ejemplo:

En ambos casos, el resultado será el mismo y será:

Ejemplo de Event Filter con key

Pero existe un mecanimos llamado Event Filter que nos permitiran filtrar directamente sobre nuestro template si nuestros eventos  cumplen una condición previamente antes de llegar al TypeScript y por tanto, no necesitaremos enviar un evento a nuestra función. Ya que, solamente entrará en dicha función cuando el evento keyUp sea igual a delete (suprimir) o backspace (retroceso).

Vamos a ver un ejemplo:

Espero que os haya gustado ¡Saludos!