Блог

Главная - Вопросы по программированию - Список, по которому перемещаются стрелки в Javascript

Список, по которому перемещаются стрелки в Javascript

#javascript #navigation #keyboard

#javascript #навигация #клавиатура

Вопрос:

Мне нужна помощь с навигацией по li с помощью клавиш со стрелками. Я попытался сделать что-то вроде:

 document.onkeydown = function(e) {
    if (e.keyCode==40) {
        document.getElementById("sugesstions").getElementsByTagName("li")[0].className="focus";
        return true;
    }
}

Конечно, теперь выбирается только первый li, но он выбирается только тогда, когда я нажимаю клавишу. Если я не нажимаю, он больше не выбран. Я попытался интегрировать несколько примеров из stackoverflow, но, похоже, функция focus() в моем случае не работает. Не знаю почему.

Комментарии:

1. «кажется, эта функция focus() не работает в моем случае» — Не имеет смысла устанавливать фокус на <li> элементе, потому что пользователь не может взаимодействовать с <li> так, как он может с элементами управления формами и привязками.

2. Я знаю. Но в некоторых примерах была функция фокусировки на LI. Вот почему я это пишу. Я новичок в JS, поэтому лучше спросить.

Ответ №1:

Я сделал это! Я думаю, что это немного запутанно, и это, вероятно, можно сделать лучше, но…

 var sel;
document.onkeyup = function(e) { 
    var count = document.getElementById("getClient").children.length;
    if (e.keyCode==40) {
        if (sel==null) {
            document.getElementById("getClient").getElementsByTagName("li")[0].className ="focus";
            sel=0;
        } else if (sel>=0 amp;amp; sel<count-1) {
            sel=sel 1;
            document.getElementById("getClient").getElementsByTagName("li")[sel].className ="focus";
        } else if (sel==count-1) {
            document.getElementById("getClient").getElementsByTagName("li")[0].className ="focus";
            sel=0;
        }
    } else if (e.keyCode==38) {
        if (sel==null) {
            sel=count-1;
            document.getElementById("getClient").getElementsByTagName("li")[sel].className ="focus";
        } else if (sel>0 amp;amp; sel<count) {
            sel=sel-1;
            document.getElementById("getClient").getElementsByTagName("li")[sel].className ="focus";
        } else if (sel==0) {
            sel=count-1;
            document.getElementById("getClient").getElementsByTagName("li")[sel].className ="focus";
        }
    }
    return sel;
}