KeyBoard Навигация по меню с помощью jquery

Question

KeyBoard Навигация по меню с помощью jquery

Я пытаюсь добавить навигацию с помощью клавиатуры в меню (на основе ul li), я связал событие нажатия клавиши с меню (или я должен привязать нажатие клавиши к документу?)

используемая функция обработчика приведена ниже

 KeyDown: function(e) {        

    var toFocus = false;


                  if (e.keyCode == 38) {
         toFocus = $((e.target/* li */).next()[0]);
      }
                          if (e.keyCode == 40) {
         toFocus = $((e.target).next()[1]);
      }
    if (toFocus) {
        $(e.target).attr('tabIndex', '-1');
        $(toFocus).attr('tabIndex', '0');
        toFocus.focus();
        return false;
        }
        }

здесь я получаю e.target как html вместо li?

Можете ли вы предложить другой способ добавить навигацию с помощью клавиатуры?

3

javascript jquery keyboard-navigation

Источник

user171875 11 сен '09 в 06:01

3 ответа

Другие вопросы по тегам javascript jquery keyboard-navigation

user168195 11 сен '09 в 06:19 2009-09-11 06:19 · Answer 1 · 2009-09-11 06:19

Попробуйте использовать пользовательский атрибут, чтобы удерживать Tabid вверх и вниз.

...KeyDown: function(e) {
    var Direction;
    if (e.keyCode == 38)
         Direction = "toUp";
    else Direction = "toDown";

    var Focus = $("li[tabid=\""$(e.target.id).attr(Direction)"\"]");
    Focus.focus();
}

---

<li ... tabid="1" toUp="-1" toDown= "2" />
<li ... tabid="2" toUp= "1" toDown= "3" />
<li ... tabid="3" toUp= "2" toDown= "4" />
<li ... tabid="4" toUp= "3" toDown="-1" />

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

надеюсь, это поможет

user28004 11 сен '09 в 06:06 2009-09-11 06:06 · Answer 2 · 2009-09-11 06:06

Мне просто интересно, если вместо того, чтобы делать это самостоятельно, почему бы не использовать уже существующий плагин?

jQuery Keyboard Navigation

демо- страница здесь

моя демонстрация: просто добавить демонстрационную страницу примера

1

Источник

user28004 11 сен '09 в 06:06

user5938749 11 апр '16 в 12:55 2016-04-11 12:55 · Answer 3 · 2016-04-11 12:55

HTML

<body>
    <input type="text" id="target-box" >
    <ul class="list">
        <li class="selected">Hello</li>
        <li>World</li>
    </ul>
</body>

JQuery

$(document).on('focus','#target-box', function() {
    var target_box = $(this);

    $(document).on('keyup', function(e) {

        if(e.which == 38){ // up arrow
            var selected_item = $('.selected');
            if(typeof selected_item.prev()[0] !== 'undefined') {
                selected_item.prev().addClass('selected');
                selected_item.removeClass('selected');
            }
        } else if (e.which == 40) { // down arrow
            var selected_item = $('.selected');
            if (typeof selected_item.next()[0] !== 'undefined') {
                selected_item.next().addClass('selected');
                selected_item.removeClass('selected');
            }
        }

        if (e.keyCode == 13) { // enter
            target_box.val($('.selected').html());
        }
    });
});

CSS

.selected {
    width : 50px;
    background-color: gray;
}