Is there any way to set focus on a specific html control on tab key press?

Question

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.

Answer 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--