How do you detect directional arrow keypresses in JavaScript?

Question

I'm trying to detect keypresses on the left and right arrow keys. Here is my current code (nothing gets printed):

this.addEventListener('keypress', event => {
    if (event.key == "ArrowLeft") {
        console.log("Left key");
    } else if (event.key == "ArrowRight") {
        console.log("Right key");
    }
});

I've tried console.log(event.key) and pressing the directional arrow buttons as well, but again, nothing gets printed.

Yes, this is explained in the very first sentence of the [documentation](//developer.mozilla.org/en/docs/Web/API/Element/keypress_event) (right below the big deprecation warning). — Sebastian Simon, Dec 25 '22 at 19:54

score 0 · Accepted Answer · answered Dec 25 '22 at 19:45

As you can read here keypress event is deprecated and shouldn't be used

Use keydown or keyup instead

window.addEventListener('keydown', event => {
  if (event.key == "ArrowLeft") {
    console.log("Left key");
  } else if (event.key == "ArrowRight") {
    console.log("Right key");
  }
})

How do you detect directional arrow keypresses in JavaScript?

1 Answers1