Как переместить фокус вокруг пунктов списка с помощью клавиш со стрелками, vanilla JavaScript - PullRequest
0 голосов
/ 20 марта 2020

Я создаю небольшое приложение toDo и хочу, чтобы мои пользователи могли искать элементы toDo с помощью клавиш со стрелками: Приложение ToDo и список, которые я хотел бы go просмотреть со стрелками в верхнем правом углу.

Мой код работает, но не так, как я задумал, так как он случайным образом перебирает элементы списка, но я не понимаю, почему это происходит.

<div class="col-md-6 align-self-center">
                    <input type="text" class="form-control" id="filter" placeholder="Search Items...">               
                        <ul id="filter-ul">
                        </ul>
                </div>

Вот мой код html, о котором идет речь, просто текстовое поле для моего поискового запроса и ul под ним. Но я думаю, что есть проблема в моем JS коде:

let filter = document.getElementById("filter");
filter.addEventListener("keyup", navigateThroughList);

function navigateThroughList() {
  let firstItem = filterList.firstElementChild;
  // firstItem.focus();

  document.addEventListener("keydown", function(e) {
    switch (e.key) {
      case "ArrowUp":
        if (document.activeElement == (filter || firstItem)) {
          filterList.lastElementChild.focus();
        } else {
          document.activeElement.previousSibling.focus();
        }
        break;


      case "ArrowDown":
        if (document.activeElement == filter) {
          firstItem.focus();
        } else {
          if(document.activeElement.nextSibling==null){
            firstItem.focus();
          }
          document.activeElement.nextSibling.focus();
        }
        break;
    }
  });
}

Как я понял из нескольких моих ошибок, это как-то связано с тем, что в моем поле ввода отсутствуют элементы одного уровня, но я защищен Я сам из-за условий в скобках {} или около того, чему я учил: ошибка в вопросе

Это сводит меня с ума, потому что логически все выглядит хорошо, я упускаю что-то очевидное, вероятно, как Я новичок в JavaScript. Любая помощь очень ценится. Заранее спасибо !!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...