A user presses Escape, and the modal doesn't close. They hit Enter in the search field, and nothing happens. Sound familiar? Keyboard handling in JavaScript looks simple until you start dealing with three events, a dozen properties, and a zoo of browser differences.

Every keydown or keyup spawns a KeyboardEvent object with two dozen fields. Some have been deprecated since the IE era, others behave differently in Firefox and Chrome. And MDN documentation is riddled with "do not use" notes. Developers don't need another specification, they need a cheat sheet that works.

Below is a complete reference on keyboard events: from the anatomy of KeyboardEvent to ready-made snippets for hotkeys. Keep the code table bookmarked, you'll need it in every other project.

💡 Quick overview:

• Use keydown instead of keypress: it works for any keys.
• event.key gives the key's symbol, event.code returns its physical code.
• event.keyCode and event.which are deprecated, don't use them in new code.
• The table below collects codes for all standard keys in modern browsers.

What's inside KeyboardEvent

When a user presses any key, the browser creates a KeyboardEvent object, a descendant of UIEvent, which in turn extends the base Event. Inside are the key's properties, modifier state, layout information.

The UI Events specification is evolving: new properties appear, old ones go to deprecated. The main change in recent years is the move away from numeric codes (keyCode / charCode / which) in favor of event.key and event.code. All modern browsers support this pair, and you should build your logic on them.

Browser support is nearly complete: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. If your project isn't stuck with IE11, you can forget about event.which.

Three events: keydown, keypress and keyup

The browser distinguishes three keyboard events. The firing order is fixed:

• keydown, key is pressed (moment of contact);
• keypress, key is held and generates a character (only for character keys);
• keyup, key is released.

Subscribing to keydown via addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

For inline handlers, use an element attribute:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

If you output the event object to the console, you'll see the full structure with all inherited fields from UIEvent and Event:

Why keydown is the main choice

keypress is officially recognized as deprecated. It only fires for keys that produce a character value, and doesn't catch modifiers: not Alt, not Ctrl, not Shift, not Meta. You can't handle Ctrl+Z or Shift+Tab through keypress.

The difference between keydown and keyup: keydown fires before the browser processes the key; keyup fires after. An important consequence follows: event.preventDefault() inside keydown cancels the browser action (for example, entering a character in a field), but inside keyup it doesn't. For hotkeys, input validation and game controls, you need keydown.

KeyboardEvent properties table

The bottom three rows are deprecated. Wherever possible, switch to event.key. If you have to support an old browser, make a fallback:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

But in 2026, such code is only for legacy projects. event.key works everywhere.

Modifier keys and combinations

Control, Shift, Alt and Meta keys don't perform actions by themselves, but change the behavior of other keys. Pressing Z gives the letter "z", while Ctrl+Z performs undo.

Boolean properties of the event help track a modifier:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

The same approach applies to any combinations: Ctrl+S (save), Ctrl+Shift+N (new window), Alt+Tab (switch). Check order: first modifiers via boolean flags, then event.key for the specific key. This makes the logic readable instead of drowning in numeric codes.

Complete key codes table

Below is the current table for all standard keys. The values event.key and event.code are given as modern browsers (Chrome, Firefox, Edge, Safari) return them.

Navigation and actions

Number row (main keyboard)

Letters A-Z

event.key returns the lowercase value for letters. event.code doesn't depend on case or layout: KeyA means the physical A key, even if the layout is Russian and the input is "Ф".

Special keys

Numeric keypad (Numpad)

Function keys

System and multimedia

Punctuation and symbols

Important table notes

• event.which is a deprecated property, use event.key.
• event.code is identical for lowercase (a) and uppercase (A) letters, it's the physical key. event.key returns the actual character considering case.
• In Firefox, event.which values for Equal, Semicolon and Minus keys differ from Chrome/Edge/Safari (noted in the table). Another reason not to use event.which.
• Chromium-based browsers and Firefox give identical event.key and event.code for all listed keys.
• Virtual keyboards: the UI Events specification requires that a virtual keyboard (mobile, on-screen) repeating a standard layout return correct event.code. In practice, mobile browsers (Chrome Android, Safari iOS) correctly handle keydown/keyup for main keys, but event.code may be empty for non-standard layouts.

Interactive trainer

For quick verification of any code from the article, use the keyboard trainer: keyevents.netlify.app. Move your cursor to the area, press keys, and see the values of event.key, event.code and event.which, as well as modifier flag states in real time. Source code is available on GitHub.

Video: keyboard events in practice

A short practical breakdown of keydown and keyup, working with modifiers and hotkeys with live examples:

⁉️🤔 Frequently asked questions

What's the difference between event.key and event.code?

event.key returns the character value considering layout and case: for the A key it's "a" (or "A" with Shift), for Russian layout, "ф". event.code returns the physical key code, identical for all layouts: "KeyA". For hotkeys, event.code is more reliable, it doesn't depend on input language. For text input, use event.key.

Why is keypress no longer used?

The W3C specification marked keypress as deprecated: it only fires for character keys and doesn't catch modifiers. You can't handle Ctrl+C, Shift+Tab and other combinations through keypress. keydown covers all keys and is supported identically in all modern browsers.

Can you completely abandon event.which and event.keyCode?

Yes, in 2026 you can. event.key is supported in Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. If your project doesn't target IE11 or Firefox 28, use only event.key and event.code.

How do you handle a long key press?

Combine keydown and keyup. On keydown start a timer or requestAnimationFrame, on keyup, reset it. For game input, this is the standard pattern: key is held, character moves, released, stops.

Do keyboard events work on mobile devices?

keydown and keyup work in mobile browsers when using an external Bluetooth keyboard. The on-screen keyboard generates input events, not keydown/keyup for all keys, so for text fields on mobile it's better to use the input event.

How do you distinguish left Shift from right?

Through event.code: "ShiftLeft" or "ShiftRight". event.key returns "Shift" for both. Same for Control, Alt and Meta.

What to use in your project

If you're writing new code, take keydown as the main event, and for key identification, event.key (symbol) and event.code (physical key). This combination covers all scenarios: hotkeys, navigation, game input, form validation.

If you maintain a product with legacy code on event.which or event.keyCode, plan a refactor. The work volume is small: replacement in handlers, but the benefit is clean, predictable code without a zoo of browser differences.

Keep the table above bookmarked. When you next need the code for a specific key, open it and copy the needed event.code value without recalling numeric codes from the IE6 era.