Question

192

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

rated 0 times [ 197] [ 5] / answers: 1 / hits: 18417 / 13 Years ago, fri, march 2, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

davisbrandtm

Add To Favorites

Follow

Total Points: 387

Total Questions: 99

Total Answers: 106

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

answered 13 Years ago annie · Accepted Answer

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/