If you see the image attached below. The country name style changes on mouse over. But when i click the down arrow key we have to show the same behavior. Can some one tell me how to do this ?
- Please show us what you have tried so far yourselfCarsten Løvbo Andersen– Carsten Løvbo Andersen2017-07-20 05:56:34 +00:00Commented Jul 20, 2017 at 5:56
- show me your code.Neeraj Pathak– Neeraj Pathak2017-07-20 05:58:00 +00:00Commented Jul 20, 2017 at 5:58
- share your codeBhargav Chudasama– Bhargav Chudasama2017-07-20 05:58:12 +00:00Commented Jul 20, 2017 at 5:58
- I have added the keydown function ..... but do not understand what to do in that. I also tried to set focus on controls that did not worked. I also tried to trigger the mouseenter of mouseover or hover events, that too did not work.joy– joy2017-07-20 06:02:12 +00:00Commented Jul 20, 2017 at 6:02
- share this tried code by youBhargav Chudasama– Bhargav Chudasama2017-07-20 06:04:21 +00:00Commented Jul 20, 2017 at 6:04
Add a comment |
1 Answer
Idea is to bind on keydown event and if key is arrow down - you should select next in the list. You have to have index of current selection and using it highlight menu item. When mouse over event happens, just change current selection index to the hovered item. Using index change background color. It's super easy to do with ReactJs and similar UI frameworks and a little messy with jQuery but if you got the idea, hopefully, you will succeed.
2 code snippets that should help:
$(document).keydown(function(e) { switch(e.which) { case 37: // left break; case 38: // up break; case 39: // right break; case 40: // down break; default: return; // exit this handler for other keys } e.preventDefault(); // prevent the default action (scroll / move caret) }); $('.tg').bind('keypress', function(event) { if(event.which === 13) { // tab $(this).next().focus(); } }); Sources: - Simulate pressing tab key with jQuery - Binding arrow keys in JS/jQuery
I have demo repo where i done similar thing with ReactJs https://github.com/liesislukas/react-dropdown-autocomplete-with-search
6 Comments
joy
I tried above code. Does not work. Problem is I want exact behavior of mousehover on the country name. How do i trigger the mouseover event ?
joy
Is there any way to trigger the 'Tab' key press event in javascript ?
Lukas Liesis
You can trigger any event. Check this question: stackoverflow.com/questions/832059/…
joy
So basically what i want is when i key the down key it should trigger the tab key press event. I have given the tab indexes to the country names. Please any one ....
joy
Is there any way to record the script ? So that i can record what happens after mousehover.
|