Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Curso de Angular: Creación de Aplicaciones Web

Contenido del curso

Introducción a Angular y Fundamentos

Estructuras de control en Angular

Alistando tu aplicación para producción

Componentes Reutilizables y Comunicación

Ciclo de vida de los componentes

Mejorando la interfaz del producto

Integración y Datos

Enrutamiento y Navegación

Perfeccionando tu e-commerce

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:18

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Curso de Angular: Creación de Aplicaciones Web

Clase 7 de 71

Clase 7 / 71

Comentarios (14)14 comentarios

Brandon Lee Aguero Fernandez

Hace 3 años

Para tener mi texto en tiempo real en mi pantalla, tuve que usar keyup en lugar de keydown

<input type="text" (keyup)="changeTextKeyboard($event)" />
<p>I'm the input content => {{ valueInput }}</p>

valueInput = '';

changeTextKeyboard(event: KeyboardEvent) {
  const elementInput = event.target as HTMLInputElement;
  this.valueInput = elementInput.value;
}

Juan Carlos Bonilla González

Hace 3 años

Excelente aporte, me sirvio muchas gracias

Ramiro Elías Guzmán Cabrera

Hace 2 años

También puedes utilizar el evento input en lugar del evento keyup.

// html
	<input type="text" [value]="person.name" (input)="handleNameChange($event)" />
// Ts
	handleNameChange(ev: Event) {
		const newNameValue = (ev.target as HTMLInputElement).value;
		this.person.name = newNameValue;
	}
```PD: Yo actualizo directamente la property person, la cuál tiene name, age y avatar en su interior

Vicente Benavides

Hace 3 años

Cuanto tiempo sin saber del (keyup.enter), me pudo haber ahorrado trabajo en mis proyectos anteriores.

Brian Armando

Hace 3 años

Un atajo muy bueno ese!

(shift.enter)="vaPaProd()"

Carlos Duarte

Hace 3 años

Excelente lo del atajo de teclado, se ocurren varias ideas para una aplicación.

Dario Bublitz

Hace 10 meses•editado

📍Uso de KeyboardEvent y acceso al valor del input

Me llevo que los eventos de teclado reciben un KeyboardEvent, y que a partir del target del evento se puede tipar el elemento como HTMLInputElement para acceder directamente a input.value en tiempo real.

Dario Bublitz

Hace 10 meses•editado

📍Diferencia clave entre keydown y change

Me llevo que el evento change en inputs de tipo texto no se dispara en tiempo real, sino al perder el foco o presionar Enter, mientras que keydown detecta cada tecla presionada, lo cual es crucial para evitar errores de lógica.

Dario Bublitz

Hace 10 meses•editado

📍Filtros y atajos de teclado en Angular

Me llevo que Angular permite escuchar teclas o combinaciones específicas directamente desde el template, como (keydown.enter) o (keydown.shift.t), facilitando la creación de atajos de teclado sin lógica adicional compleja.

Jorge Blanco

Hace 2 años

Quero saber mas de as [HTMLInputElement] o lo que sea , donde puedo conseguir mas informacion ???

Carlos Iván Solís Donoso

Hace 2 años

La expresión const input = event.target as HTMLInputElement; en TypeScript realiza un type assertion (aserción de tipo). Esto le dice al compilador que trate event.target como un HTMLInputElement, lo cual es útil para acceder a propiedades específicas de los elementos de entrada, como value. Esto asegura que puedas trabajar con el objeto con el tipo adecuado y acceder a sus propiedades sin errores de tipo.

Andrés Eduardo Martinez Morgado

Hace 2 años

Dejo mis notas de la clase

  <!-- la diferencia entre el input tipo text y tipo number al manejar eventos
   es que en el caso del number el evento se ejecuta automaticamente al dar click en la flecha o al desenfocar del input
   en el caso del text se ejecuta solo cuando se desenfoca del input o al dar enter    -->
  <input type="number" [value]="age"  (change)="changeHandler($event)">
  <input type="text" [value]="name" (change)="changeHandler($event)" >
  <hr>
  <!--el evento keyword se usa para capturar eventos de teclado
  se ejecutan al oprimir una tecla -->
  <input type="text" [value]="item.name" (keydown)="keydownHandler($event)">
  <!-- tambien se puede usar para capturar un atajo de teclado al gusto-->
   <input type="text" [value]="name" (keydown.shift.a)="keydownShortcut()">
```  \<!-- la diferencia entre el input tipo text y tipo number al manejar eventos   es que en el caso del number el evento se ejecuta automaticamente al dar click en la flecha o al desenfocar del input   en el caso del text se ejecuta solo cuando se desenfoca del input o al dar enter    -->  \<input type="number" \[value]="age"  (change)="changeHandler($event)">  \<input type="text" \[value]="name" (change)="changeHandler($event)" >  \<hr>  \<!--el evento keyword se usa para capturar eventos de teclado  se ejecutan al oprimir una tecla -->  \<input type="text" \[value]="item.name" (keydown)="keydownHandler($event)">  \<!-- tambien se puede usar para capturar un atajo de teclado al gusto-->   \<input type="text" \[value]="name" (keydown.shift.a)="keydownShortcut()">

Seba Cardoso

Hace 3 meses

filtro de diferne;a

Dario Bublitz

Hace 10 meses•editado

📍Eventos de teclado en Angular (keydown, keyup)

Me llevo que Angular permite manejar eventos de teclado usando (keydown) y (keyup), siendo keydown el más utilizado porque se dispara en el momento exacto en que se presiona una tecla.

Yezid Garcia Medina

Hace un año

Si al colocar el evento de (change) o (keydown) genera error de linea roja subrayado en la linea de Labscomponent.htmls, es necesario para corregirlo cambiar la version de Angular Language Service, tomar alguno anterior, más no el ultimo. Con eso se me soluciono el problema.

Raúl Adolfo Sánchez Rodríguez

Hace 2 años

💻Resumen de la clase y algunos extras:

ANDRES ALFONSO MIRA MEJIA

Hace 3 años

✅

Recursos

¿Qué son los eventos de teclado en programación?

Los eventos de teclado son esenciales en la interacción de usuario con aplicaciones web, ya que nos permiten capturar acciones específicas cuando el usuario presiona teclas en su teclado. Estos eventos son particularmente útiles para mejorar la experiencia de usuario al proporcionar respuestas rápidas a sus acciones, como el autocompletado o la ejecución de comandos rápidos.

¿Cuáles son los eventos de teclado más utilizados?

Existen varios tipos de eventos de teclado que puedes manejar en la programación, entre los más comunes se encuentran:

keydown: Este evento se dispara en el momento en que el usuario presiona una tecla. Es muy útil para detectar la acción en tiempo real y es uno de los eventos más utilizados.
keyup: Se activa cuando el usuario suelta una tecla que previamente había presionado. Es útil para detectar la finalización de una acción.
keypress: Aunque es menos utilizado actualmente, se dispara cuando se presiona una tecla que produce un valor de entrada en el campo, como las teclas de letras y números.

¿Cómo funcionan los eventos keydown en JavaScript?

Veamos un ejemplo de uso del evento keydown en un entorno de programación, utilizando TypeScript y Angular como caso de estudio. La siguiente función maneja el evento de keydown, logrando capturar detalles como qué tecla fue presionada y sobre qué elemento se efectuó la acción:

// Método manejador para el evento Keydown
kDownHandler(event: KeyboardEvent): void {
  const input: HTMLInputElement = event.target as HTMLInputElement;
  console.log(`Tecla presionada: ${event.key}`);
  console.log(`Valor actual del input: ${input.value}`);
}

En este código, cada vez que se presione una tecla, se capturará el evento y se imprimirá en consola la tecla presionada y el valor actual del campo donde se está escribiendo.

¿Cuál es la diferencia entre los eventos keydown y change?

Una cuestión interesante es cómo los eventos keydown y change difieren entre sí y en qué situaciones es más apropiado usar uno u otro:

keydown: Permite capturar en tiempo real cada tecla que el usuario presiona. Es ideal para situaciones donde necesitas reaccionar inmediatamente a la entrada del usuario. Por ejemplo, al implementar atajos de teclado.
change: Solo se dispara cuando el usuario termina de editar un campo de texto y realiza una acción de "desenfoque" (como presionar Enter o hacer click fuera del campo). No se activa con cada tecla presionada, lo que lo hace más apropiado para validaciones finales después de que el usuario ha completado una entrada.

¿Cómo configurar atajos de teclado en Angular?

Angular facilita la implementación de atajos de teclado, lo que permite a los desarrolladores asignar acciones específicas a combinaciones de teclas. Por ejemplo, podrías configurar un manejador que se active solo cuando se presione una combinación específica como Shift + T:

// Configuración de un evento Keydown con atajo de teclado
@Component({
  selector: 'app-root',
  template: `<input (keydown.Shift.T)="clickHandler()">`
})
export class AppComponent {
  clickHandler(): void {
    console.log('¡Atajo de teclado ejecutado!');
  }
}

En este código, el método clickHandler se ejecutará solo cuando la combinación de teclas Shift + T sea detectada en el campo de entrada, permitiendo funcionalidades avanzadas y optimizadas para los usuarios.

Explorar y manejar adecuadamente los eventos de teclado puede mejorar significativamente la interacción en tiempo real y la usabilidad de tus aplicaciones, permitiendo responder de manera dinámica a las acciones del usuario. Al aplicar estas técnicas, no solo aumentas la interactividad de la aplicación, sino que también proporcionas una experiencia de usuario enriquecida y profesional. ¡Continúa practicando y explorando, el aprendizaje nunca termina!

Introducción a Angular y Fundamentos

Desarrollo de Aplicaciones Modernas con Angular

Creando tu primer proyecto en Angular

Creación de componentes y rutas en Angular para gestión de tareas

String Interpolation en Angular: Transmisión de Datos a Templates

Modificación de Propiedades HTML con Angular: Property Binding

Eventos en Angular: click, doble click y cambio de input

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Reactividad Granular con Signals en Angular

Reactividad en HTML: Implementación de Signals en JavaScript

Estructuras de control en Angular

Estructuras de Control y Renderizado Dinámico en Angular

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Actualización de tareas con Angular y programación inmutable

Uso de ngIf y ngFor para control de flujos en Angular

ngIf vs ngSwitch en Angular

Manejo Avanzado de Formularios Reactivos en Angular

Validaciones de Inputs en Formularios Reactivos con Angular

Alistando tu aplicación para producción

Validación de formularios y estilos dinámicos en Angular

Clases dinámicas en Angular sin mover el DOM

Modo edición con doble clic en Angular

Estados Computados en Programación Reactiva con Signals

Persistencia de Tareas con LocalStorage en Angular

ng build para producción en Angular

Desplegar una app Angular en Firebase Hosting

Nueva sintaxis @if y @else en Angular

Sintaxis y rendimiento de for y switch en JavaScript moderno

Migración Automática a Nueva Sintaxis de Angular

Componentes Reutilizables y Comunicación

Creación de Tienda en Línea con Angular y Tailwind CSS

Creación y Organización de Componentes en Angular

Componentes Reutilizables en Angular: Creación y Maquetado de Productos

Uso de Angular DevTools para Debugging en Angular

Inputs en Angular: Comunicación de Datos entre Componentes

Outputs en Angular: Comunicación del Hijo al Padre

Maquetación de Galería de Productos con Tailwind CSS

Ciclo de vida de los componentes

Ciclo de Vida de Componentes en Angular

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

Ciclo de Vida de Componentes en Angular: Eventos Clave

Detección de Cambios en Inputs con ngOnChange en Angular

Prevención de fugas de memoria con ngOnDestroy en Angular

Creación de un Reproductor de Audio con WaveSurfer.js en Angular

Mejoras de la página About en e-commerce: audio y contador dinámico

Mejorando la interfaz del producto

Componentización y Manejo de Datos en Angular

Creación de Headers en Páginas Web con Angular

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo

Implementación de Reactividad en Carrito de Compras con Angular

Gestión de Carrito de Compras en Angular con ngOnChanges

Gestión de Estado en Angular: Solución al InputDrilling

Gestión de Estado Global en Angular con Servicios y Señales

Inyección de Dependencias en Angular: Conceptos y Prácticas

Integración y Datos

Conexión de Angular a REST API usando Fake Store API de Platzi

Creación de Alias para Imports Cortos en Proyectos JavaScript

Transformación de Datos con Pipes en Angular

Creación y uso de pipes personalizados en Angular

Manipulación de Fechas en Angular con Date Functions

Manipulación del DOM con Directivas en Angular

Deployment de Angular en Vercel

Enrutamiento y Navegación

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas

Implementación de Router Link en Angular para SPA eficiente

Implementación de Layouts Compartidos en Angular para Vistas Anidadas

Uso de RouterLinkActive en Angular para Navegación Activa

Routing en Angular: Creación de Páginas de Detalle de Producto

Consulta dinámica de detalles de producto con Angular y REST API

Galería de Productos Dinámica con Angular y TypeScript

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Perfeccionando tu e-commerce

Filtrado de Productos por Categoría en E-commerce

Filtros de Productos con Query Params en Angular

Optimización de Aplicaciones con Lazy Loading y Code Splitting

Optimización de JavaScript en Angular con Lazy Loading

Optimización de Carga de Chunks con Preloading en Angular

Migración de Angular a Nueva Sintaxis con ng generate

Despliegue de Aplicaciones con Verzal en Entornos Productivos