Arrow Keys in JavaScript

Arrow Keys Quick Reference

Basic Arrow Key Detection

The simplest way to detect arrow keys using the modern approach:

// Modern approach (recommended)
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    console.log('Arrow Up pressed');
  }
  if (e.key === 'ArrowDown') {
    console.log('Arrow Down pressed');
  }
  if (e.key === 'ArrowLeft') {
    console.log('Arrow Left pressed');
  }
  if (e.key === 'ArrowRight') {
    console.log('Arrow Right pressed');
  }
});

Preventing Page Scroll

By default, arrow keys scroll the page. If you're building a game or custom interface, you'll want to prevent this:

// Prevent arrow keys from scrolling
document.addEventListener('keydown', (e) => {
  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
    e.preventDefault(); // Stops default scrolling

    // Your custom behavior here
    handleArrowKey(e.key);
  }
});

Game Controls Example

Using arrow keys for character movement:

// Game character movement
const player = {
  x: 0,
  y: 0,
  speed: 5
};

document.addEventListener('keydown', (e) => {
  // Prevent scrolling
  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
    e.preventDefault();
  }

  // Move character
  switch(e.key) {
    case 'ArrowUp':
      player.y -= player.speed;
      break;
    case 'ArrowDown':
      player.y += player.speed;
      break;
    case 'ArrowLeft':
      player.x -= player.speed;
      break;
    case 'ArrowRight':
      player.x += player.speed;
      break;
  }

  updatePlayerPosition(player.x, player.y);
});

Continuous Movement (Key Hold)

For smooth game controls, track which keys are pressed and update position in a game loop:

// Track which arrow keys are pressed
const keys = {
  ArrowUp: false,
  ArrowDown: false,
  ArrowLeft: false,
  ArrowRight: false
};

// Update on keydown
document.addEventListener('keydown', (e) => {
  if (e.key in keys) {
    e.preventDefault();
    keys[e.key] = true;
  }
});

// Update on keyup
document.addEventListener('keyup', (e) => {
  if (e.key in keys) {
    keys[e.key] = false;
  }
});

// Game loop - updates continuously
function gameLoop() {
  const speed = 5;

  if (keys.ArrowUp) player.y -= speed;
  if (keys.ArrowDown) player.y += speed;
  if (keys.ArrowLeft) player.x -= speed;
  if (keys.ArrowRight) player.x += speed;

  updatePlayerPosition(player.x, player.y);
  requestAnimationFrame(gameLoop);
}

gameLoop(); // Start the game loop

List/Menu Navigation

Navigate through items with arrow keys:

// Navigate through a list or menu
let currentIndex = 0;
const items = document.querySelectorAll('.menu-item');

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    currentIndex = Math.min(currentIndex + 1, items.length - 1);
    focusItem(currentIndex);
  }

  if (e.key === 'ArrowUp') {
    e.preventDefault();
    currentIndex = Math.max(currentIndex - 1, 0);
    focusItem(currentIndex);
  }
});

function focusItem(index) {
  // Remove focus from all items
  items.forEach(item => item.classList.remove('focused'));
  // Add focus to current item
  items[index].classList.add('focused');
  items[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

Arrow Keys with Modifiers

Detecting Shift, Ctrl, or Alt with arrow keys for advanced functionality:

// Detect modifier keys with arrows
document.addEventListener('keydown', (e) => {
  // Shift + Arrow = Select text/items
  if (e.shiftKey && e.key.startsWith('Arrow')) {
    console.log('Shift +', e.key);
    expandSelection(e.key);
  }

  // Ctrl + Arrow = Jump words (text editing)
  if (e.ctrlKey && e.key.startsWith('Arrow')) {
    console.log('Ctrl +', e.key);
    jumpByWord(e.key);
  }

  // Alt + Arrow = Navigate history (browser-like)
  if (e.altKey && e.key === 'ArrowLeft') {
    console.log('Alt + Left: Go back');
    navigateBack();
  }
  if (e.altKey && e.key === 'ArrowRight') {
    console.log('Alt + Right: Go forward');
    navigateForward();
  }
});

Common Use Cases

Keyboard Navigation

• Menu navigation (up/down)
• Tab switching (left/right)
• List item selection
• Calendar date selection

Games

• Character movement (2D/4D directional)
• Camera control
• Menu selection in games
• Puzzle piece movement

Text Editing

• Cursor movement
• Word jumping (with Ctrl)
• Selection expansion (with Shift)
• Line navigation

Browser Compatibility

Arrow key detection with event.key is supported in:

• ✅ Chrome 51+
• ✅ Firefox 29+
• ✅ Safari 10+
• ✅ Edge 12+
• ✅ All modern browsers

Related Guides

• keyCode vs key vs code - Understanding keyboard event properties
• Special Keys Guide - Working with Ctrl, Alt, Shift, and Meta
• Interactive KeyCode Tester - Test arrow keys in real-time