How to disable tab key globally, with the exception of all forms on a page with JavaScript?

Question

I am making a one-page application, which will be launched next week, for a rather huge client, and is going to live for a rather large event, and well, a ton remains.

There are 100+ "pages" that are loaded within a single window 700px x 600px, and I recently found out that you can contribute to the page / sections, which in turn will break the application, because this will lead to focus for hidden elements off-screen , so for this reason, I disabled the tab key for the entire application.

But now there are a couple of places where we have a form with several input fields that you cannot complete by filling out the form. This is a pain in the ass.

I need to make it so that you can insert form fields, but only form fields. I have the tabindex attribute set for the form and tried to enable the tab of the tabs, but could not get it to work without forcing the application to go to hidden sections.

Here is the function that I need to change in order to disable the tab key, except for entering the input fields in the form.

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

I tried to make it that obv did not work lol

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

Thanks:)

Answer 1

I made some corrections regarding what @Joseph sent to answer this question so that the handle can move the + tab through the form inputs so you can change direction. This was very unpleasant for me before, when I first needed to find a way to do this, and I did not have time to spend more time trying to find a complete solution for this so far. 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(); } } }); }); 

Demonstration of his work http://jsfiddle.net/jaredwilli/JdJPs/

Answer 2

Have you tried setting tabIndex="-1" to all elements on which you do not want to insert a tab? I think this is a much better solution.

Otherwise, in the function check function of the key handler event.target (or event.srcElement in IE) to find out if an event occurred with a form element. You seem to be using jQuery, so you can only assign the "allowTab" class to 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 

Answer 3

what we do is determine which entry is next in the line and skip 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(); } } }); });​ 

some optimization may be required, but it works. it was originally intended to skip informal elements. You can add selectors so you don’t miss if you want. in addition, you can add logic for the behavior of Shift+Tab (perhaps before the tab logic)

---

it is obvious that it will still go through some elements in accordance with how they appear in the source. however, why not just remove these hidden elements from the DOM, but still track them using the methods found in this question . Thus, you will not have pain in the fact that you need to cycle through the screens.