Cómo detectar Caps Lock
document.addEventListener('keydown', (event) => {
if (event.key === "CapsLock") {
// Caps Lock was pressed
}
});Usa event.key para reaccionar al significado de la tecla (sigue la distribución del teclado) y event.code para su posición física, por ejemplo WASD en juegos. keyCode e which están obsoletas: siguen funcionando, pero sus valores difieren entre navegadores y distribuciones.
Cómo tratan los navegadores Caps Lock
Para avisar a los usuarios de que Caps Lock está activado en un campo de contraseña, comprueba event.getModifierState("CapsLock") en cualquier evento de tecla: informa del estado del bloqueo, no solo de esta tecla.
En React
<input onKeyDown={(e) => { if (e.key === "CapsLock") { /* … */ } }} />Buscador de Keycodes JavaScript
Pulsa cualquier tecla y mira al instante todas las propiedades del evento de teclado, con un fragmento keydown listo para copiar para tus atajos.
Preguntas frecuentes
¿Cuál es el keyCode de Caps Lock?
20. Está obsoleto, sin embargo: en código nuevo usa event.key (“CapsLock”) o event.code (CapsLock).
¿Cuál es la diferencia entre event.key y event.code?
event.key es el carácter o la acción que produce la tecla con la distribución actual; event.code es la posición física de la tecla, igual en todas las distribuciones.
¿Debo usar keydown o keypress?
keydown. El evento keypress está obsoleto y no se dispara para teclas que no producen caracteres, como Escape o las flechas.