HTML JQUERY implement ARROW DOWN ON UL/LI

Question

This is a simple requirement and I cannot make it work.

I simply want to navigate through a using arrow keys.Also I want to detect when a arrow key is pressed on a LI.However I cannot navigate with arrows- nor does my keydown event fire.

       <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("li,a").keydown(function () {
                    alert("kd");
                });
            });
        </script>
    </head>
    <body>



<div>
        <input type="text" />
        <ul id="sbOptions_54514054" class="sbOptions" style="">
            <li><a href="#-1" rel="-1">--Select one--</a></li>
            <li><a href="#2" rel="2">Windows</a></li>
            <li><a href="#1" rel="1">Siding</a></li>
            <li><a href="#7" rel="7">Roofing</a></li>
        </ul>
    </div>

I have links inside the li.So I can click and focus on a link(a). What I need to do is to arrow down from one link to another and also add a keydown — josephj1989, Jan 18 '12 at 01:03

score 7 · Answer 1 · answered Jan 18 '12 at 18:41

How about something like this jsFiddle?

Basically it maintains a simple index of which list item is currently selected. The up and down arrow keys are bound to the keydown event and if someone presses the up arrow at the top of the list, the top item stays selected and vice-versa.

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
});

can you add a function on this to make it scroll while keydown is pressed? — timmack, Aug 29 '15 at 09:03

HTML JQUERY implement ARROW DOWN ON UL/LI

1 Answers1

Linked