W moim HTML zrobiłem to, aby mieć link na 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>

Ale szukam możliwości uczynienia linków aktywnych za pomocą klawiszy na klawiaturze. Czy to możliwe ?

Wielkie dzięki

1
MrMarty 1 marzec 2019, 03:28

2 odpowiedzi

Najlepsza odpowiedź

Tutaj słuchamy naciśnij klawisz i mapuj, aby kliknąć element.

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>
0
Bibberty 1 marzec 2019, 21:23

Idealny. To całkowicie to, czego potrzebowałem ..

Dostosowałem kod do moich potrzeb, wpadłem w jeden problem, klucz powrotu.

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

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

Ale powrót na ostatniej stronie, tak samo jak: History.back ()

Możliwe jest użycie Backspace za podążanie za tym linkiem?

Wielkie dzięki

0
MrMarty 1 marzec 2019, 19:19