Jquery/JS - Arrow & Return Key Tab Index
I have built my own autocomplete/suggestion feature for my search box.
It works fine but I would love to know how I can use keyword arrow keys, to tab through the list of linked suggestions. I'm thinking to start by adding (tabIndex=1, tabIndex=2, tabIndex=3...) or (rel="1", rel="2", rel"3"...) to my links.
At the moment, the links are simply:
<a onclick="addSuggToTextbox('suggestion1')" tabIndex="1">Suggestion 1</a>
<a onclick="addSuggToTextbox('suggestion2')" tabIndex="2">Suggestion 2</a>
...
Well I could probably figure out left and right key navigation, from previous StackOverflow questions... but what confuses me, is allowing my users to click the 'return' key, when they arrow tabbed to the link/suggestion they wanted.
So let's say I've just used the right arrow key to scroll along the list of links, to the one I want. How can using the 'return' key, detect which link is focused and to imitate it's onclick event? On click of the 'return' key, I would obviously have a function that passed the parameterized value to the text box.
Example:
This is what I have managed already:
$(document).keydown(function(e) {
if (e.keyCode == 13) { $('myLink??????').click(); }
});
But how does this function know which link has focus? So I can replace myLink开发者_如何学Python????
with the identity of the chosen suggestion link.
Any suggestions to get me started (or finished in my case) would be gratefully received.
Assuming the links are getting focus on each keystroke, then you could do...
$(document).keydown(function(e) {
if (e.keyCode == 13) { $('nav a').is(':focus').trigger("click"); }
});
精彩评论