Disable keyboard shortcuts when text field or textarea has focus using pure JavaScript

Question

I have a simple script that uses left and right arrows to move to next and previous blogpost.

var nextEl = document.getElementById("pagination__next__link");
var prevEl = document.getElementById("pagination__prev__link");

document.onkeyup = function(e) {

    if (nextEl !== null) {
        if (e.keyCode === 37) {
            window.location.href = nextEl.getAttribute('href');
        }
    }
    if (prevEl !== null) {
        if (e.keyCode === 39) {
            window.location.href = prevEl.getAttribute('href');
        }
    }
    return false;
};

But it also works when I have text input or textarea focused. What would be the best way to disable the keyboard shortcuts when focused?

Thanks!

Bischoff

The best way would be to not listen to the document, but to the pagination links for the keyup. – Movie

You mean like @Thanh suggested below? nextEl.onkeyup = prevEl.onkeyup = function(e) {...} i can't really get it work... Have to listen to the document. – Bischoff

Answer 1

Disable event propagation of the input to the document

nextEl.onkeyup = prevEl.onkeyup = function(e){ e.stopPropagation(); };

Impassion

Answer 2

To adress the issue for all text inputs and textareas, I ended up using the following snippet of code:

  // prevent shortcuts from interfering with typing in text inputs or textareas
  document.documentElement.addEventListener(
    "keydown",
    (ev) => {
      if (
        ev.target &&
        (ev.target instanceof HTMLTextAreaElement ||
          (ev.target instanceof HTMLInputElement && (!ev.target.type || ev.target.type === "text")))
      ) {
        ev.stopPropagation()
      }
    },
    true,
  )

Dania