Move to a specific tab index when leaving another input with jquery

Question

I have a page that is generated dynamically and all the tabindex's are preset. What I am attempting to do is to have the focus set to a specific tabindex when another input loses focus. For example if I have <input tabindex=119> and another with <input tabindex=16> how can I get to tabindex=16 when 119 loses focus? I have tried

$(zip).keydown(function(event) {
            if (event.which == 9) {
                event.preventDefault();
                //$('#DublinTheme_wt213_block_wtMainContent_WebPatterns_wt50_block_wtPanelContent_WebPatterns_wt191_block_wtColumn1_wtVendors_EmailAddress').focus();
                $('input').find("[tabindex=16]").focus();
            }
        });

where zip is the input field id of tabindex = 119. This did nothing at all for me. I have also tried just setting the focus to the id of the input I want: $('#DublinTheme_wt213_block_wtMainContent_WebPatterns_wt50_block_wtPanelContent_WebPatterns_wt191_block_wtColumn1_wtVendors_EmailAddress').focus(); put in the place of $('input').find("[tabindex=16]").focus(); again, this did not place the focus on the correct input.

Any help here would be greatly appreciated.

Answer 1

You shouldn't put Outsystems generated id's hardcoded in your script. Create a new expression like in the example below. The blur event will be executed when an element loses focus.

Obviously replace the yourOutsystemsTabIndex199Element and yourOutsystemsTabIndex16Element with the name of your inputs.

Also set the expression so it doesn't escape content.

"<script>
$(document).ready(function(){
  $('#" + yourOutsystemsTabIndex199Element.id + "').on('blur', function(){
    $('#" + yourOutsystemsTabIndex16Element.id + "').focus();
  });
});
</script>"