How to disable tab key globally except for all forms in a page with JavaScript?

Question

I'm making a single page app that is launching next week, for a pretty huge client, and going live for a pretty big event and well, there's still a ton to finish before then.

There's 100+ 'pages' which are all loaded within a single 700px x 600px window, and I had learned not long ago you could tab through the page/sections, which in-turn would break the app because it would bring focus to hidden off-screen elements, so for this reason, I disabled the tab key for the entire app.

But now there are a couple places where we have a form with a handful of input fields which you are not able to tab through as you fill in the form. It's a pain in the ass.

I need to make it so you can tab through the form fields, but only the form fields. I have the tabindex attribute set for the form, and have tried to make inputs tab enabled but was not able to make it work without causing the app to jump to hidden sections.

Here's the function I need to change so it will disable tab key except from input to input fields in a form.

window.onkeydown = function(e) {
    if (e.keyCode === tab) {
        return false;
    }
}

I tried to do this, which obv didnt work lol

$('input').keydown(function(e) {
    if (e.keyCode === tab) {
        return true;
    }
});

Thanks :)

Answer 1

I made some fixes to what @Joseph posted for an answer to this that handle being able to shift + tab through inputs of a form so you can reverse direction. It was a very annoying thing for me before when I first had to find a way to do this, and didn't have time to waste anymore trying to find a complete solution for this until now. Here it is.

$(function() {
    // gather all inputs of selected types
    var inputs = $('input, textarea, select, button'), inputTo;

    // bind on keydown
    inputs.on('keydown', function(e) {

        // if we pressed the tab
        if (e.keyCode == 9 || e.which == 9) {
            // prevent default tab action
            e.preventDefault();

            if (e.shiftKey) {
                // get previous input based on the current input
                inputTo = inputs.get(inputs.index(this) - 1);
            } else {
                // get next input based on the current input
                inputTo = inputs.get(inputs.index(this) + 1);
            }

            // move focus to inputTo, otherwise focus first input
            if (inputTo) {
                inputTo.focus();
            } else {
                inputs[0].focus();
            }
        }
    });
});

Demo of it working http://jsfiddle.net/jaredwilli/JdJPs/

Answer 2

Have you tried setting tabIndex="-1" on all elements that you don't want to be able to tab to? I think that's a much better solution.

Otherwise, within your key handler function test event.target (or event.srcElement in IE) to see if the event originated with a form element. You seem to be using jQuery, so you could assign an "allowTab" class just to the fields in your form and then do this:

$(document).keydown(function(e) {
   if (!$(e.target).hasClass("allowTab"))
      return false;
});

Or

if (e.target.tagName !== "input")
// etc