How to Detect Arrow Key Presses in JavaScript?

Photo by Paweł Czerwiński on Unsplash

Sometimes we need to detect the arrow key presses in our JavaScript web apps.

In this article, we’ll look at how to detect arrow key presses in JavaScript.

Use the keyCode Property

We can listen to the keydown event and get the keyCode property from the event object.

For instance, we can write:

document.onkeydown = (e) => {
  e = e || window.event;
  if (e.keyCode === 38) {
    console.log("up arrow pressed");
  } else if (e.keyCode === 40) {
    console.log("down arrow pressed");
  } else if (e.keyCode === 37) {
    console.log("left arrow pressed");
  } else if (e.keyCode === 39) {
    console.log("right arrow pressed");
  }
};

To assign the keydown event handler function to the document.onkeydown property.

This lets us listen to the keydown event on the HTML document.

Then we can get the keyCode property from the e event object to see which key is pressed.

38 is the code for the up arrow.

40 is the code for the down arrow.

37 is the code for the left arrow.

And 39 is the code for the right arrow.

Also, we can use the addEventListener method to add the keydown event listener:

document.addEventListener("keydown", (e) => {
  e = e || window.event;
  if (e.keyCode === 38) {
    console.log("up arrow pressed");
  } else if (e.keyCode === 40) {
    console.log("down arrow pressed");
  } else if (e.keyCode === 37) {
    console.log("left arrow pressed");
  } else if (e.keyCode === 39) {
    console.log("right arrow pressed");
  }
});

Use the key Property

Also, we can use the key property from the event object to the key that’s pressed as a string instead of a number.

For instance, we can write:

document.onkeydown = (e) => {
  e = e || window.event;
  if (e.key === "ArrowUp") {
    console.log("up arrow pressed");
  } else if (e.key === "ArrowDown") {
    console.log("down arrow pressed");
  } else if (e.key === "ArrowLeft") {
    console.log("left arrow pressed");
  } else if (e.key === "ArrowRight") {
    console.log("right arrow pressed");
  }
};

We compare the key property value against the string names for the keys.

Also, we can use addEventListener method to add the key down listener by writing:

document.addEventListener("keydown", (e) => {
  e = e || window.event;
  if (e.key === "ArrowUp") {
    console.log("up arrow pressed");
  } else if (e.key === "ArrowDown") {
    console.log("down arrow pressed");
  } else if (e.key === "ArrowLeft") {
    console.log("left arrow pressed");
  } else if (e.key === "ArrowRight") {
    console.log("right arrow pressed");
  }
});

Conclusion

We can detect arrow key presses by listening to the keydown event.

And in the event listener, we can either check the key or keydown properties of the event object to see which key is pressed.

And there you have it. Thank you for reading.