Проблема с навигацией по клавиатуре (вверх / вниз) - PullRequest
Новая
       21

Проблема с навигацией по клавиатуре (вверх / вниз)

0 голосов
/ 30 декабря 2018

Я пытаюсь заставить свое приложение поддерживать стрелки вверх / вниз со ссылками в неупорядоченном списке.

Я копирую https://jsfiddle.net/cse_tushar/5LM4R/,, что делает почти то, что мне нужно.Однако мне нужна возможность нажать Enter и перейти по ссылке, которая сфокусирована.

Мой неупорядоченный список выглядит так: 

 <ul>
    <li><a href="#">First Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>
 </ul>

Мой jQuery выглядит так (пока только для стрелки вниз)): 

 $(document).keyup(function(e) {
   var focused_li, next;
   if (e.which === 40) { // Down arrow
      focused_li;
        if (focused_li) {
           alert("FOCUSED"); // NOT ALERTING
           focused_li.find("a").focusout();
           next = focused_li.next();
           if (next.length > 0) {
             return console.log("there is a next");
           } else {
             return console.log("there is no next");
           }
        } else {
           focused_li = $("ul li").eq(0);
           focused_li.find("a").focus()
        }
    } else if (e.which === 38) { // Up arrow 

    } else {

    }

  });

Вот JSFiddle: https://jsfiddle.net/p48fkw0v/

В данный момент он не предупреждает, где у меня есть alert("FOCUSED"), и я не могу обойти эту проблему.

1 Ответ

0 голосов
/ 30 декабря 2018

Я действительно не знаю, для чего вы работали с 'focus_li', но я придумал другое решение.

Это перебирает ваш список, чтобы проверить, на каком элементе сосредоточено внимание, и фокусируется наследующий элемент соответственно

Новый код JS: 

$(document).keyup(function(e) {
if (e.which === 40) {
  focus = false
    links = $('a') //feel free to add more links it'll still work
  for (var i = 0; i < links.length; i++) {
    if (links[i] === (document.activeElement)) {
      focus = true;
        if (links[i+1] === undefined) {
      console.log("last element") //reached last link
      } else {
      links[i+1].focus(); //focuses next link if available
      }
    break;
    }
  }
  if (!focus) {
    links[0].focus() //if none of the links is focused, the first one gets focused
  }
} else if (e.which === 38) {
            //adapt the above code to links[i-1]
} else {

}

});

вот JSfiddle:

https://jsfiddle.net/90jso3cq/

чтобы ответить на часть вашего вопроса о вводе по ссылке, которая происходит автоматически, если у вас есть действительная ссылка

РЕДАКТИРОВАТЬ

Код получает все элементыклассы 'links' и иногда они не в порядке

здесь есть новый HTML 

<ul>
   <li><a id="link_1"class="link" href="#">First Link</a></li>
   <li><a id="link_2"class="link" href="#">Second Link</a></li>
   <li><a id="link_3"class="link" href="#">Third Link</a></li>
<ul>

и новый JS 

if (e.which === 40) {
  focus = false
    links = $('.link') //feel free to add more links itll still work
  for (var i = 0; i < links.length; i++) {
    if (links[i] === (document.activeElement)) {
      focus = true;
        if (links[i+1] === undefined) {
      console.log("last element") //reached last link
      } else {
      console.log(document.getElementById("link_" + (i + 2)))
      document.getElementById("link_" + (i + 2)).focus(); //focuses next link if available
      }
    break;
    }
  }
  if (!focus) {
    document.getElementById("link_1").focus() //if none of the links is focused, the first one gets focused
  }
} else if (e.which === 38) {
            //adapt the above code to links[i-1]
} else {

}

});

и последняя, ​​но не менее важная новая скрипка

https://jsfiddle.net/8pdtsxjv/

...