Активировать ссылку на div

Question

В моем HTML я сделал это для ссылки на div.

<div id="up" onclick="location.href='#'"></div>
<div id="down" onclick="location.href='#'"></div>
<div id="left" onclick="location.href='#'"></div>
<div id="right" onclick="location.href='#'"></div>

, но я ищу возможность активировать ссылки с помощью клавиш на клавиатуре.это возможно?

Большое спасибо

Answer 1

Отлично.это полностью то, что мне нужно ..

Я адаптировал код под свои нужды, столкнулся с одной проблемой, ключом возврата.

case "Backspace":
elem = "return";
break;

<div id="return" onclick="location.href='../page.html'"></div>

Но это возврат на последней странице, какthis: history.back ()

Можно ли использовать backspace для перехода по этой ссылке?

Большое спасибо

Answer 2

Здесь мы слушаем нажатие клавиш и карту, чтобы щелкнуть элемент.

document.addEventListener('keyup', (e) => {
  let elem;
  console.log(e.key);
  switch (e.key) {
    case "ArrowDown":
      elem = "down";
      break;
    case "ArrowUp":
      elem = "up";
      break;
    case "ArrowLeft":
      elem = "left";
      break;
    case "ArrowRight":
      elem = "right";
      break;
    case "Backspace":
      elem = "back";
      break;
  }

  if (elem) elem = document.querySelector(`#${elem}`);

  if (elem) {
    // Prevent event.
    e.preventDefault();
    e.stopPropagation();
    elem.innerText = "Clicked";
    elem.click();
  }
});

div {
  min-width: 100px;
  min-height: 25px;
  border: 1px solid blue;
}

<div id="up" onclick="location.href='#'"></div>
<div id="down" onclick="location.href='#'"></div>
<div id="left" onclick="location.href='#'"></div>
<div id="right" onclick="location.href='#'"></div>
<div id="back" onclick="location.href='google.fr'"></div>