Keeping tab focus in jQuery dialog

Question

I am currently studying the jQuery dialog and want to use it in my side project. I want to add tabindex to divs in a tab dialog. But the focus goes elsewhere when I insert the last item in the dialog box.

I want the focus to return to the first element when I insert the last element. Is there a way to keep focus in the dialog box?

Thanks!

Answer 1

Add a keypress event on the last item to ignore the default tab action and return focus to the first item in the dialog box.

The following example assumes the last element is last_element_id and the first is first_element_id .

 $('#last_element_id').on('keydown', function(e) { if ((e.keyCode || e.which) == 9) { $('#first_element_id').focus(); e.preventDefault(); } }); 

Answer 2

Disable tabs on any items that you want to skip as follows:

 $("#element").attr("tabIndex", -1); 

Answer 3

Any negative tab index should stop the element from focusing, so just negate the existing value and then remove the minus by returning the element back to the order of the tabs.

e.g. change tab index from 10 to -10 and then back to 10