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 :)

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 :)

• javascript

• are you still planning to post your solution as you indicated in a comment? – psr Commented Jun 1, 2012 at 0:41
• I actually never did get around to finding a solution. But, just now saw this comment and came up with what is a complete solution for tabbing and shift+tabbing on forms and have posted it below. – jaredwilli Commented Oct 16, 2012 at 22:59

3 Answers 3

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/

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

what we do is to determine what input is next in line and skip to it!:

http://jsfiddle.net/qXDvd/

$(document).ready(function() {

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

    //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();

            //get next input based on the current input we left off
            var nextInput = inputs.get(inputs.index(this) + 1);

            //if we have a next input, go to it. or go back
            if (nextInput) {
                nextInput.focus();
            }
            else{
                inputs[0].focus();
            }
        }
    });
});​

may need some optimization but it works. this was originally meant to skip non-form elements. you can add selectors not to skip if you like. additionally, you can add logic for the Shift+Tab behavior (maybe before the tab logic)

obviously, it will still go through some elements according to how they appear in the source. however, why not just remove those hidden elements from the DOM but still keep track of them using the methods found in this question. that way, you won't have the pain of having to cycle back and forth through off-screen elements.