How to Handle Keyboard Events in JavaScript

Use keyboard event handlers when your UI should react to key presses, shortcuts, navigation, or form interactions. The cleanest default is listening for "keydown" so you can catch the key before the browser completes the default action.

What you’ll build or solve

You’ll learn how to handle keyboard events in JavaScript using keydown and the event object. You’ll also know how to detect specific keys and build shortcuts safely.

When this approach works best

This approach is the right choice when logic depends on what key the user presses.

Common real-world scenarios include:

• Enter-to-submit
• Escape to close modal
• Slash to focus search
• Arrow key navigation
• Keyboard shortcuts

This is a bad idea when the same behavior already belongs to native form controls and extra handling would make the UX confusing.

Prerequisites

You only need:

• A basic HTML page or input field
• A JavaScript file or <script> tag
• Basic DOM event knowledge

Step-by-step instructions

Step 1: Listen for "keydown" and check the pressed key

Attach the listener to the document or a focused input.

<input class="search" type="text" placeholder="Search">

<script>
  document.addEventListener("keydown", (event) => {
    console.log(event.key);
  });
</script>

Use event.key to handle specific shortcuts.

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    console.log("Close modal");
  }
});

This is also useful for Enter-to-submit flows.

if (event.key === "Enter") {
  runSearch();
}

What to look for:

• "keydown" fires as the key is pressed
• event.key gives the readable key name
• Great for shortcuts and navigation
• Use preventDefault() when overriding browser behavior
• Scope listeners carefully to avoid conflicts

Examples you can copy

Escape to close

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    modal.remove();
  }
});

Enter to search

search.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    runSearch();
  }
});

Slash shortcut

document.addEventListener("keydown", (event) => {
  if (event.key === "/") {
    search.focus();
  }
});

Common mistakes and how to fix them

Mistake 1: Checking the wrong property

What the reader might do:

if (event.code === "Enter")

Why it breaks: code is physical-key based, while key reflects the actual typed key.

Corrected approach:

if (event.key === "Enter")

Mistake 2: Listening on the wrong element

What the reader might do:

button.addEventListener("keydown", () => {});

Why it breaks: the button must actually have focus.

Corrected approach:

Attach the listener to document for global shortcuts.

Mistake 3: Forgetting preventDefault() for overrides

What the reader might do:

if (event.key === "/") {
  search.focus();
}

Why it breaks: the slash may still type into the current field.

Corrected approach:

event.preventDefault();
search.focus();

Troubleshooting

If the shortcut never fires, confirm the listener is attached to the right scope.

If the wrong key name logs, inspect event.key.

If browser defaults still happen, add preventDefault().

If shortcuts interfere with text fields, restrict them to non-input contexts.

Quick recap

• Use "keydown" for key press logic
• Read event.key
• Great for shortcuts and navigation
• Use preventDefault() for overrides
• Scope listeners carefully