Как добавить связывание клавиш со стрелками, чтобы реагировать \ проводить - PullRequest
Новая
       24

Как добавить связывание клавиш со стрелками, чтобы реагировать \ проводить

0 голосов
/ 04 октября 2018

Наконец-то я создал игру, это игра-викторина с 3 ответами, но я хочу иметь возможность прокручивать 3 ответа, которые представляют собой 3 кнопки, моими клавишами вверх и вниз.но я боролся за то, как это реализовать, кто-нибудь пробовал это раньше?или какие-нибудь советы?

Это мой фиктивный код, который нужно добавить к моему редуксу, но он не очень функционален 

<!DOCTYPE html>
<html>

<head>
  <style>
    a:focus, a:active {
    font-size: 18px;
    color: red;
    font-family: Helvetica;
    }

   .btn:focus {
     background: green;
     outline: none;
   }
</style>
</head>

<body onkeydown="myFunction(event)">

  <a id="myAnchor" href="https://www.w3schools.com">Visit W3Schools.com</a>

  <p id="demo"></p>

  <input class="btn" id="btn-1" type="button"  value="First dog">
  <input class="btn" id="btn-2" type="button"  value="Second dog">
  <input class="btn" id="btn-3" type="button"  value="Third dog">

  <script>
    window.onload = () => {
      document.getElementById("btn-1").focus();
      console.log(document.activeElement)
    };

    function myFunction(event) {
      const btn1 = document.getElementById("btn-1");
      const btn2 = document.getElementById("btn-2");
      const btn3 = document.getElementById("btn-3");

      const keyPress = event.which || event.keyCode;
      const focusedButtonElement = document.activeElement.id

      switch(focusedButtonElement) {
        case "btn-1":
          if (keyPress === 39) return btn2.focus() 
        case "btn-2":
          if (keyPress === 37) return btn1.focus() 
          if (keyPress === 39) return btn3.focus() 
        case "btn-3":
          if (keyPress === 37) return btn2.focus() 
        default:
        break
      }

      if(keyPress === 13) {
        document.activeElement.click();
        console.log("clicked")
      }

    }
  </script>

</body>

</html>

Спасибо, ребята

1 Ответ

0 голосов
/ 08 октября 2018

Удалите прослушиватель событий onkeydown из тега body и измените функцию window.onload, чтобы программно добавить прослушиватель событий.

window.onload = () => {
    document.getElementById("btn-1").focus();
    console.log(document.activeElement)
    document.addEventListener('keydown');
};
...