KeyBoard Navigation for menu using jquery

Asked 11/9, 2009 at 6:1 Answered 11/4, 2016 at 12:55

I am trying to add keyboard navigation to Menu(ul li based ) , i have bound the keydown event to menu (or should i bind keydown to the document ?)

the handler function used is given below

 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;
        }
        }

here i get e.target as html instead of li ?

can u suggest any other way to add keyboard navigation ?

Sprit answered 11/9, 2009 at 6:1 Comment(1)

Answer on a similar question. (with a working jsfiddle) – Welles 8/8, 2016 at 13:39

I just wonder if, instead of doing this by your self, why not using an already existing plugin?

jQuery Keyboard Navigation

demo page here

my demo: just to add a demo page of an example

Trichinize answered 11/9, 2009 at 6:6 Comment(5)

I the plugin is complex , all i need is to set focus to my menu , and get the e.target to return the current menu item – Sprit 11/9, 2009 at 6:19

you're kidding right? complex? mate... please look at my own example and tell me what complex is this all about! :-) – Trichinize 11/9, 2009 at 6:37

Thanx for the demo , btw i dint mean the usage of the plugin was complex , i ment the plugin complex calculations about x y positions n stuffs , the code i mentioned above was working only problem with it was it returned html as event.target , i just need to find the current li which has the focus – Sprit 11/9, 2009 at 7:4

all those lines of code you do in a cleaner manner and it's much better for future updates than look at your code ;) - with one line of code you do everything in the navigation (the init line) the rest is just animations to show you some nice effect. – Trichinize 11/9, 2009 at 7:55

the bottom line is, why trying to re-invent the wheel? Code Reuse is what we all should do in the first place as developers. – Trichinize 11/9, 2009 at 8:3

Try to use custom attribute to hold the tabid for up and down.

...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" />

The above code is just to show the idea, it is late now and I didn't have time to test it.

Reclaim answered 11/9, 2009 at 6:19 Comment(0)

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;
}

Garry answered 11/4, 2016 at 12:55 Comment(0)

Recommended topics

Hot tags