0

I need to set focus on a button AFTER user hits the tab key from a currently focused control. Please note that there are other dynamic controls between the currently focused control and the desired button which I don't want the focus to go.

the control arrangement looks like this:

<dynamic drop down control 1>
<dynamic drop down control 2>
<dynamic drop down control 3 (Focus is currently here)>
<dynamic drop down control 4>
<dynamic drop down control 5>
...
...
<dynamic drop down control n>
<the button>

I want to set the Next Tab target to the button when user selects a specific value in Currently selected drop down and press the tab key.

Please note that I can not set the focus to the button straight away on drop down value onChange. user must select the button via tabbing only.

Is there any way in JQuery of JS using which I can achieve this? Since the number of controls are dynamic, I cant use hard coded TabIndex here.

Goomba
  • 29
  • 3
  • 9
  • Are you talking about tabindex? http://stackoverflow.com/questions/4112289/what-is-the-html-tabindex-attribute – Jonas Grumann Jun 06 '14 at 11:49
  • Use tabindex attribute – Bardo Jun 06 '14 at 11:49
  • Use html `tabindex` property like ` – Think Different Jun 06 '14 at 11:49
  • Can I use tabIndex when I dont know how many drop downs will be there? what will be the tab index of the button? – Goomba Jun 06 '14 at 11:51
  • If you want to focus button on hitting tab button and no matter on which drop down has current focus, then yes you can use tabindex="1" – Bhushan Kawadkar Jun 06 '14 at 11:53
  • Do you want all dropdowns to be focusable I'm afraid you'll need javascript or a server side language to properly set the tabindes. If you don't care about the other dropdowns you should be good to go with html – Jonas Grumann Jun 06 '14 at 11:53
  • no I dont needed all DDs to be focussable :-) just needed to shift the next focus to the button once user chooses a particular value in any of the drop downs. I checked the value on OnChange event and if the value matched, I just set the tabIndiex of the button to 1 as suggested by Bhushan. It worked :-) – Goomba Jun 06 '14 at 12:09

1 Answers1

1

Set attribute tabindex to negative value for all dynamic dropdown elements:

tabindex="-1"

This makes all these elements not tabbable but still focusable.

See if that fits your needs:

--DEMO--

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • It worked, thanks. But I made a little alteration as suggested by Bhushan Kawadkar in the comment. Using no TabIndex attribute on the drop downs, and TabIndex = 1 on the button served my purpose better. Thanks a lot. – Goomba Jun 06 '14 at 12:06
  • @user3534802 Not sure but as i see it on chrome, it doesn't work: http://jsfiddle.net/RwRkJ/1/ Maybe in your case, what you call 'dropdown' are not SELECT elements and are not tabbable by default – A. Wolff Jun 06 '14 at 12:10