How to detect Arrow Up
document.addEventListener('keydown', (event) => {
if (event.key === "ArrowUp") {
// Arrow Up was pressed
}
});Use event.key to react to what the key means (it follows the keyboard layout) and event.code for its physical position, for example WASD in games. keyCode and which are deprecated: they still work, but their values differ between browsers and layouts.
How browsers treat Arrow Up
Arrow keys scroll the page and move the caret. In custom listboxes, menus and grids, handle them to move focus between items — and call preventDefault() so the page doesn’t scroll at the same time.
In React
<input onKeyDown={(e) => { if (e.key === "ArrowUp") { /* … */ } }} />JavaScript Keycode FinderPress any key and instantly see every property of the keyboard event, with a copy-ready keydown snippet for shortcuts.
Open the tool Frequently asked questions
What is the keyCode for Arrow Up?
38. It’s deprecated, though: use event.key (“ArrowUp”) or event.code (ArrowUp) in new code.
What is the difference between event.key and event.code?
event.key is the character or action the key produces with the current layout; event.code is the physical key position, the same on every layout.
Should I use keydown or keypress?
keydown. The keypress event is deprecated and doesn’t fire for keys that don’t produce characters, such as Escape or the arrow keys.