0

I'm aware there are a lot of questions regarding navigation using keyboard events. However, as I want to understand everything and not just copy-paste stuff I couldn't find any good explanation or tutorial about the subject.

This is what I got so far and it's working for the left and right arrows. But if someone could point me in the right direction how to make it work for the up and down arrows as well, I would be very happy! And maybe it's not the most beautiful way to solve it, but for start I just want to understand the basic!

<a class="link" href="#">Link 1</a> <a class="link" href="#">Link 2</a> <a class="link" href="#">Link 3</a> <a class="link" href="#">Link 4</a> <a class="link" href="#">Link 5</a> <br /> <a class="link" href="#">Link 1</a> <a class="link" href="#">Link 2</a> <a class="link" href="#">Link 3</a> <a class="link" href="#">Link 4</a> <a class="link" href="#">Link 5</a> if (e.which == 39) { $("a:focus").next().focus(); } if (e.which == 37) { $("a:focus").prev().focus(); }
Improve this question
2
  • Probably you are looking for the different key codes. for up/down it's 38 and 40. for more info check it out css-tricks.com/snippets/javascript/javascript-keycodes Commented Apr 8, 2015 at 12:03
  • I know the keycodes, I know how to alert something on key up, the problem is I don't know how to for example move between divs using key up or down Commented Apr 8, 2015 at 12:06

3 Answers 3

Reset to default
1

I wrote a example spliting the links into two divs:

<div id="menu1"> <a class="link" href="#">Link 1</a> <a class="link" href="#">Link 2</a> <a class="link" href="#">Link 3</a> <a class="link" href="#">Link 4</a> <a class="link" href="#">Link 5</a> </div> <div id="menu2"> <a class="link" href="#">Link 1</a> <a class="link" href="#">Link 2</a> <a class="link" href="#">Link 3</a> <a class="link" href="#">Link 4</a> <a class="link" href="#">Link 5</a> </div>

And attached the event:

$("a.link").on('keyup', function(e) { var current = $('a:focus'); if (e.which == 39) { current.next().focus(); } else if (e.which == 37) { current.prev().focus(); } // move to first link on previous div else if (e.which == 38) { current.parent().prev().find('a:first').focus(); } // move to first link on next div else if (e.which == 40) { current.parent().next().find('a:first').focus(); } }); $("a.link:first").focus();

http://jsfiddle.net/rogeriolino/g6s22676/

EDIT

Keeping the same index

// move to first link on previous div else if (e.which == 38) { var index = current.index() + 1; current.parent().prev().find('a:nth-child(' + index + ')').focus(); } // move to first link on next div else if (e.which == 40) { var index = current.index() + 1; current.parent().next().find('a:nth-child(' + index + ')').focus(); }

http://jsfiddle.net/rogeriolino/g6s22676/4/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for the fiddle, but the thing I want to achieve is to move the cursor up and down based on the current position. Exactly like left and right (prev, next) but for up and down.
Instead of use :first you can use ng-child passing the current index. Look: jsfiddle.net/rogeriolino/g6s22676/4
Ah, thank you! I tried the nth-child but didn't get it right! Thank you for your answers!
1

I understand that you want to jump from row to row.

Try using the :nth-child() selector in jQuery, info here, so you can select whatever element you want (in this case the one above).

Improve this answer

Comments

0

I enjoy working with this module when working with key bindings, it makes it a lot less complicated and the code is more readable / maintainable.

https://github.com/madrobby/keymaster

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.