JavaScript Keyboard Events

Written by Swapnil RajaPublished 24 Aug 2026

Keyboard events report which key was pressed and let you respond to it.

keydown fires as the key goes down, keyup as it comes back.

event.key tells you which key it was.

Example

javascript

document.body.innerHTML = '<input id="field">';

document.getElementById("field").addEventListener("keydown", function (event) {
  console.log("pressed " + event.key);
});

document.getElementById("field").dispatchEvent(
  new KeyboardEvent("keydown", { key: "a" })
);

PreviousJavaScript Mouse Events NextJavaScript Form Events

Example

javascript

document.body.innerHTML = '<input id="field">';

const field = document.getElementById("field");

field.addEventListener("keydown", function (event) {
  console.log(event.key);
});

field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
field.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));

Example

javascript

document.body.innerHTML = '<input id="field" value="hello">';

const field = document.getElementById("field");

field.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    console.log("submitting " + field.value);
  }
});

field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));

Example

javascript

document.body.innerHTML = '<input id="field">';

document.getElementById("field").addEventListener("keydown", function (event) {
  if (event.ctrlKey && event.key === "s") {
    console.log("save shortcut");
  }
});

document.getElementById("field").dispatchEvent(
  new KeyboardEvent("keydown", { key: "s", ctrlKey: true })
);

Example

javascript

document.body.innerHTML = '<input id="field">';

const field = document.getElementById("field");

field.addEventListener("input", function () {
  console.log("value is now " + field.value);
});

field.value = "ab";
field.dispatchEvent(new Event("input"));

Example

javascript

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    console.log("close the dialog");
  }
});

document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Keyboard Events</title>
</head>
<body>

  <h1>Keyboard Events</h1>

  <input id="field" placeholder="Type something">

  <p id="out"></p>

  <script>
    const field = document.getElementById("field");
    const out = document.getElementById("out");

    field.addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
        out.textContent = "You submitted: " + field.value;
      } else {
        out.textContent = "You pressed: " + event.key;
      }
    });
  </script>

</body>
</html>

JavaScript Keyboard Events

Example

The Keyboard Events

Syntax

Named Keys

Example

Reacting to Enter

Example

Modifier Keys

Example

keydown Fires Before the Value Changes

Example

Listening on the Whole Page

Example

Complete Example

Try It Yourself

Important Points

Conclusion