Keep tabbing within modal pane only

Question

On my current project we have some modal panes that open up on certain actions. I am trying to get it so that when that modal pane is open you can't tab to an element outside of it. The jQuery UI dialog boxes and the Malsup jQuery block plugins seem to do this but I am trying to get just that one feature and apply it in my project and it's not immediately obvious to me how they are doing that.

I've seen that some people are of the opinion that tabbing shouldn't be disabled and I can see that point of view but I am being given the directive to disable it.

Answer 1

This is just expanding on Christian answer, by adding the additional input types and also taking into consideration the shift+tab.

var inputs = $element.find('select, input, textarea, button, a').filter(':visible'); var firstInput = inputs.first(); var lastInput = inputs.last();  /*set focus on first input*/ firstInput.focus();  /*redirect last tab to first input*/ lastInput.on('keydown', function (e) {    if ((e.which === 9 && !e.shiftKey)) {        e.preventDefault();        firstInput.focus();    } });  /*redirect first shift+tab to last input*/ firstInput.on('keydown', function (e) {     if ((e.which === 9 && e.shiftKey)) {         e.preventDefault();         lastInput.focus();     } }); 

Answer 2

I was finally able to accomplish this at least somewhat by giving focus to the first form element within the modal pane when that modal pane is open and then if the Tab key is pressed while focus is on the last form element within the modal pane then the focus goes back to the first form element there rather than to the next element in the DOM that would otherwise receive focus. A lot of this scripting comes from jQuery: How to capture the TAB keypress within a Textbox:

$('#confirmCopy :input:first').focus();  $('#confirmCopy :input:last').on('keydown', function (e) {      if ($("this:focus") && (e.which == 9)) {         e.preventDefault();         $('#confirmCopy :input:first').focus();     } }); 

I may need to further refine this to check for the pressing of some other keys, such as arrow keys, but the basic idea is there.