Lista de códigos de teclas en JavaScript: Códigos de eventos de teclado para enter, espacio, retroceso y más

Original article: JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More

Los eventos de teclado te ayudan a capturar las interacciones del usuario con el teclado.

Como muchos otros eventos en JavaScript, la interface KeyboardEvent provee todas las propiedades y métodos requeridas para manejar cada pulsión de tecla que el usuario haga en el teclado.

Ha habido muchos artículos escritos acerca de como funcionan y como usarlos. Al mismo tiempo, W3.org se mantiene actualizando las especificaciones, introduciendo nuevas propiedades, y dejando obsoletas algunas existentes, y etiquetando cierto código como antiguo.

Producto de esto, es esencial para el desarrollador web mantenerse aprendiendo sobre la interface KeyboardEvent para saber exactamente qué usar y qué dejó de ser relevante.

En este artículo aprenderás sobre:

• La interface KeyboardEvent.
• Los tipos de eventos de teclado (keyboard event types) en los que necesitamos enfocarnos.
• Los tipos de eventos de teclado que tal vez nunca necesitemos.
• Qué propiedades necesitas en la práctica y cómo los diferentes navegadores las manejan.
• Qué está obsoleto, y qué está en uso.
• Un lugar para probar esto mientras aprendemos
• Finalmente, la lista actual de key codes para referencia y uso futuro.

Espero que lo disfrutes.

La interfaz KeyboardEvent y los tipos de eventos

La interfaz KeyboardEvent provee información usando las constantes, propiedades y un único método definidos (a partir de enero de 2021). Esta extiende la interfaz UIEvent la cual eventualmente extiende la interfaz Event.

Hay principalmente tres tipos de eventos de teclado: keydown, keypress y keyup. Podemos obtener información contextual de estos eventos de las propiedades y métodos de la interfaz KeyboardEvent.

Puedes agregar cada uno de estos tipos de eventos a un elemento HTML o document object usando el método addEventListener. Aquí hay un ejemplo de escucha a un evento keydown en un elemento cuyo id es "escribe-aqui":

let elem = document.getElementById('escribe-aqui');

elem.addEventListener("keydown", function (event) {
    // El parámetro del evento es del tipo KeyboardEvent
  	addRow(event);
});

De forma alternativa, puedes usar métodos de manipulación como onKeydown(event), onKeyup(event), onKeyPress(event) con el elemento para manejar eventos de teclado. Aquí hay un ejemplo de manejo de un evento keyup a un elemento input:

<input type="text" id="escribe-aqui" onkeyup="hazAlgo(event)">

Si imprimes el objeto event en la consola del navegador, verás todas sus propiedades y métodos junto con los que hereda de las interfaces UIEvent y Event.

Prueba este juego evento de teclado interactivo

Antes de avanzar, ¿qué te parece un juego para explorar los eventos de teclado, sus propiedades, características y más? Creo que sería increíble usarlo junto con este artículo y más allá.

Si tienes problemas para acceder al juego de arriba, puedes acceder a la herramienta directamente aquí: https://mauriciotrp.github.io/KeyboardEvents/

y puedes acceder al código fuente del demo aquí:
https://github.com/MauricioTRP/KeyboardEvents

keydown, keypress, keyup - ¿Cuál debería usar?

Los eventos de teclado son:

• keydown: este se dispara cuando una tecla es presionada.
• keypress: esta sólo se dispara cuando una tecla que produce un valor de caracter es presionada. Por ejemplo, si aprietas la tecla a, este evento se disparará cuando la tecla aproduzca el valor de caracter 97. Por otra parte, este evento no se disparará cuando aprietes la tecla Shift ya que esta no produce un valor de caracter.
• keyup: este se dispara cuando una tecla es "liberada"

Si estos tres eventos se adjuntan a un elemento del DOM, el orden de ejecución sería:

1. Primero, keydown
2. Luego, keypress (con la condición declarada arriba)
3. Último, keyup

Entre estos eventos, el más usado (o debería ser) es keydown porque:

• El evento keydown tiene la covertura más amplia de teclas que producen información contextual. El evento keypress funciona sólo con un subconjunto de teclas. No puedes capturar Alt, Ctrl, Meta y otros eventos de teclas similares con keypress. Esto también significa que no puedes disparar el evento keypress con combinaciones de teclas como Ctrl Z, Shift Tab y así.
• Más aún, el evento keypress ha quedado obsoleto. Esta es una razón lo suficientemente fuerte para evitarlo.
• Mientras que keydown y keyup son eventos que cubren todas las teclas y están bien soportados por la mayoría de los navegadores, hay algunas diferencias que hacen preferir keydown sobre keyup. Los eventos keydown se disparan después que el navegador procesa la tecla. Si tu cancelas un evento keydown (por ejemplo usando event.preventDefault()), la acción del navegador será cancelada también. En el caso del evento keyup, la acción del navegador no será cancelada cuando hayas cancelado el evento.

En el ejemplo de abajo, estamos usando event.preventDefault()cuando un evento keydown o keyup se dispara. La acción del navegador de escribir el caracter de la tecla no será realizado en el caso de keydown pero si ocurrirá en el caso de keyup.

Con toda esa explicación el evento keydown es el ganador indiscutiro y debería convertirse en el tipo de evento más popular (usado)

Como usar las propiedades del KeyboardEvent en la práctica

¡Esta es la pregunta del billón de dólares! La respuesta corta es "depende", pero ¿de qué? Depende de:

• Que el navegador soporte tu aplicación
• Cuan antigua es el código de tu aplicación, y cuanto estás dispuesto a refactorizar?

Pero antes que lleguemos ahí, veamos un adelanto de algunas propiedades y metodos útiles del interface KeyboardEvent

Las últimas tres propiedades han quedado obsoletas y deberías usar la propiedad key en su lugar. La propiedad key es la que tiene mayor soporte de navegadores.

Está soportada en:

• Microsoft Edge: Versión >=79
• Firefox: Versión >=29
• Google Chrome: Versión >=51
• Safari: Versión >=10.1

Entonces, mientras no uses ninguno de los navegadores más antiguos, la propiedad event.key debería ser suficiente para que puedas identificar una tecla. En el caso que tengas que dar soporte a navegadores más antiguos, una mejor alternativa sería la propiedad event.which

window.addEventListener("keydown", function(event) {

    if(event.key !== undefined) {
        // Manipula el evento con KeyboardEvent.key
    } else if (event.wich !== undefined) {
        // Manipula el evento con KeyboardEvent.wich
    }
});

Si tu código usa cualquiera de estas propiedades obsoletas y tienes la oportunidad de refactorizar este código, lo mejor es hacerlo.

Teclas Modificadoras

Las teclas modificadoras son las teclas especiales en tu teclado que modifican el comportamiento por defecto de las otras teclas. Control, Shift, y Alt son algunas modificadoras. Cuando una tecla modificadora es combinada con otra tecla, puedes esperar que una acción distinta ocurra.

Por ejemplo, si tu aprietas la tecla z, se supone que retorna el código o la letra z. Pero si la combinas con la modificadora Control y presionas Ctrl+z, lo más probable es que tengas la operación deshacer. Veámoslo con más ejemplos en la próxima sección

Las propiedades, event.altKey, event.ctrlKey, event.shiftKey y así. Ayudan a detectar si una tecla modificadora ha sido presionada.

Combinación de teclas

Podemos combinar múltiples teclas y realizar acciones basandonos en las combinaciones. El code snippet de más abajo muestra como combinar la tecla Ctrl y Z para definir una acción:

document
    .getElementById("to_focus")
    .addEventListener("keydown", function(event) {
    	if(event.ctrlKey && event.key === "z"){
    		// Hacer algo, tal vez deshacer
    	}
    }
});

Aquí hay otro ejemplo que demuestra algo más sobre combinación de teclas:

Una lista completa de los valores de eventos de teclas.

La tabla de más abajo muestra una lista de teclas con los valores de event.which, event.key y event.code

Debes tener en cuenta:

• event.which ha quedado obsoleta
• El valor de event.code es el mismo para letras minúsculas (a) y mayúsculas (A). El valor de event.key representa la letra real.
• El valor de event.which es diferente en Firefox (FF) y otros navegadores para las teclas igual(=), punto y coma(;) y guión/menos(-)

En resumen

Para resumir:

• Puedes usar KeyboardEvent para capturar las interacciones del usuario usando el teclado.
• Hay primariamente tres eventos de teclado keydown, keypress y keyup.
• Deberíamos usar el evento keydown tanto como sea posible, ya que satisface la mayoría de los casos de uso.
• La propiedad event.which ha quedado obsoleta. Usa event.key cuando sea posible.
• Si tienes que dar soporte a navegadores antiguos, usa las alternativas apropiadas para la detección de teclas.
• Podemos combinar múltiples teclas y realizar operaciones.
• Los teclados virtuales soportan estos eventos siempre y cuando el layout y funciones sean similares al teclado estandar.

Eso es todo por ahora. ¡Gracias por leer hasta aquí! Conectémonos. Puedes @ me en Twitter (@tapasadhikary) con comentarios o siéntete libre de seguirme.