Для этого можно использовать событие keypress: https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Например:

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keypress', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
  if (e.code == 'ArrowLeft') {
    //Slide to the left
  }
  if (e.code == 'ArrowRight') {
    //Slide to the right
  }
}

С помощью e.code вы можете запросить нажатую клавишу. Примеры:

ArrowUp
ArrowLeft
ArrowRight
ArrowDown

Если вы хотите, чтобы вся ваша страница реагировала на нажатие клавиши, а не только поле ввода, вы можете использовать это:

    document.onkeypress =  keyPressFunction;
    function keyPressFunction(e){
        // here comes your keypress-code
        var charCode = (typeof e.which == "number") ? e.which : e.keyCode
        console.info(charCode);
    }

Просто поместите этот фрагмент в тег script.

Как и onclick, есть три вида событий клавиатуры. onkeydown, onkeyup и onkeypress.

• onkeydown излучает, когда пользователь нажимает кнопку (только нажатие)
• onkeyup излучает, когда пользователь отпускает кнопку
• onkeypress излучает, когда пользователь нажимает кнопку

Вам нужно использовать событие keypress в окне и вызывать функцию внутри if statements, когда пользователь нажимает определенную клавишу.

   function openNav() {
        document.getElementById("users").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("users").style.width = "0%";
    }

    window.addEventListener("keydown", function(e) {
        if (e.keyCode === 38) { 
            closeNav(); // this function will be executed when user press Arrow Up key 
        }else if (e.keyCode === 40) {
            openNav(); // this function will be executed when user press Arrow Down key
        }
    });

Здесь window.addEventListener выполняет функцию, которая находится внутри него, когда пользователь нажимает клавишу. И операторы if будут вызывать функцию closeNav(), если нажата стрелка вверх, и вызывать функцию openNav(), если нажата стрелка вниз. если нажаты другие клавиши, если операторы не будут выполняться.

События клавиатуры

В javascript у нас есть три события клавиатуры

1. keydown
2. keypress
3. keyup

запускается именно в таком порядке.

на мой взгляд, лучший способ работать с навигацией с помощью клавиатуры — это использовать событие «нажатие клавиши», как в примере Сандеша.

Обработка событий

Для обработки этих событий у вас есть 3 способа: (примеры для «keydown»)

1. в разметке

<element onkeydown = "myScript">

2. JavaScript element.onkeydown

object.onkeydown = function(){myScript};

3. JavaScript element.addEventListener

object.addEventListener("keydown", myScript);

Из соображений безопасности лучше всего использовать третий. (дополнительную информацию вы можете получить, погуглив «XSS» или «межсайтовый скриптинг»). На самом деле, чтобы предотвратить XSS на вашем сайте, вам нужно добавить несколько заголовков http, которые блокируют встроенные скрипты (CSP).

кроме того, вы можете передать true третьему параметру метода addEventListener, чтобы зафиксировать событие перед его отправкой на любую EventTarget под ним в дереве DOM, а затем вы можете остановить распространение, если код ключа соответствует зарезервированному. Это зависит от пользовательского опыта, который вы хотите реализовать.

Коды клавиш

Попробуйте этот сайт, чтобы получить коды ключей: keycode.info

на мой взгляд, для вашего случая лучше всего использовать event.code.

Ресурсы:

MDN — нажатие клавиши

MDN — добавить прослушиватель событий