Keycode Checker

Keycode Checker es una herramienta para desarrolladores que le permite verificar instantáneamente cómo se reconocen las teclas que presiona en el navegador como datos de eventos dentro de JavaScript.

En el desarrollo frontend, la detección precisa de teclas es necesaria al implementar atajos o controles de juegos basados en la entrada del usuario. Con esta herramienta, puede obtener propiedades como event.key, event.code y event.keyCode de un vistazo y copiarlas con un solo clic. También es fácil probar el comportamiento de diferentes distribuciones de teclado (como JIS vs US) y combinaciones con teclas modificadoras como Shift y Ctrl.

También puede verificar el historial de entrada de teclado y probar de manera segura la supresión de acciones predeterminadas del navegador (como el movimiento de Tab o el desplazamiento con Space) dentro del navegador cuando e.preventDefault() está habilitado.

event.key

Representa el carácter o la función que el usuario ingresó realmente. Por ejemplo, al presionar Shift + 1 en un teclado de EE. UU., se obtiene ! como event.key. Es la propiedad más recomendada para evaluar la entrada lógica.

event.code

Indica la posición física de la tecla presionada. Independientemente de la distribución del idioma del teclado, presionar la tecla en la posición "A" siempre devolverá KeyA. Esto es muy útil para acciones que dependen de la disposición física, como el movimiento WASD en los juegos.

event.keyCode / event.which

Devuelve un código numérico específico del sistema asignado a la tecla presionada (por ejemplo, 65 para A). Aunque se han usado durante mucho tiempo en el desarrollo de JavaScript, ahora están obsoletos. Solo deben usarse para verificaciones de compatibilidad con versiones anteriores.

event.location

Un número que indica la región física del teclado donde se presionó la tecla. Puede distinguir entre teclas estándar (0), modificadores izquierdos (1), modificadores derechos (2) y teclas del teclado numérico (3).

preventDefault()

Un método de JavaScript que se utiliza para cancelar el comportamiento predeterminado del navegador desencadenado por un evento, como desplazarse hacia abajo en la página cuando se presiona la tecla Space.

Q.¿Puedo usar esto en un teléfono inteligente o tableta?

Funciona correctamente si tiene un teclado físico conectado. Sin embargo, con un teclado de software en pantalla, es posible que el evento keydown no se dispare correctamente dependiendo del sistema operativo o el navegador, o siempre puede devolver el mismo código (por ejemplo, 229). Esta herramienta está diseñada para usarse con teclados físicos.

Q.¿Debería usar event.key o event.code?

Depende de su caso de uso. Si desea evaluar el significado de la tecla o el carácter ingresado (por ejemplo, 'Presione Enter para enviar'), use event.key. Por otro lado, si desea basar las acciones en la posición física en el teclado (por ejemplo, 'Mover personaje con W, A, S, D'), usar event.code es la mejor práctica.

Q.¿Puedo evitar atajos como F5 o Ctrl+W?

Incluso si usa e.preventDefault() de JavaScript, es posible que no pueda evitar por completo atajos potentes reservados a nivel del sistema operativo/navegador o seguridad, como cerrar pestañas, recargar ventanas o abrir herramientas de desarrollador del navegador.

Q.¿Por qué event.keyCode está obsoleto?

Debido a que el valor numérico devuelto puede variar según el navegador, el sistema operativo y la distribución del teclado, lo que genera problemas de compatibilidad. Actualmente se recomienda usar event.key o event.code.

Q.¿Se envían los datos de las teclas ingresadas a un servidor?

No, no se envían. Todo el procesamiento se completa utilizando JavaScript dentro de su navegador, y su historial de entrada de teclado nunca se envía ni se guarda en ningún servidor externo.

Aquí hay escenarios de desarrollo típicos donde es necesario verificar los keycodes.