KeyBoard Navigation for menu using jquery

Question

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 ?

Answer 1

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

Answer 2

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. So please don't vote me down for not working.

Hope that helps