JavaScript/jQuery, how to disable Tab key

When the user clicks submit on my form, my goal is to prevent the user from being able to press Tab and still be able to tab through the different form fields.

Currently, I'm doing it like this on the 'keyup' event:

if (event.keyCode === 9 && bBusy) {
    $("html").focus();
}

Open in new window


But it's not working because tabbing still works. I know my code works because had I put the focus on one of the form fields, (e.g. $("#aFormField").focus()) instead of the HTML tag, I can see how the focus keeps going back to the field. But it's somehow not working on the HTML tag. If I can't do it this way, what alternatives do I have?

Thanks.
elepilAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

elepilAuthor Commented:
By the way, I've also tried:

if (event.keyCode === 9 && bBusy) {
    event.preventDefault();
}

Open in new window


It's not working either.
0
Julian HansenCommented:
Why not just disable your input fields on submit - user can still tab to them but can't do anything?

Or throw up a semi-opaque overlay over the form so it can't be accessed?
0
elepilAuthor Commented:
I am already creating a <div> overlay over the form, but tab still works. That's the reason why I posted to begin with.

As for disabling them, I guess that's one of several tedious alternatives, like I could also change all their tabindex values to -1. But I was hoping for a short elegant solution, and I thought just intercepting the tab keyup would be best. I was hoping I was doing something wrong, you don't see anything wrong with the way I'm handling the keyup event?
0
Julian HansenCommented:
If you give each of your input controls a class you can disable them with jQuery

$('.inputControl').prop('disabled',true);

What is the purpose of preventing the tab though - is the form being AJAX'd back or POST'ed.

Are you attempting to prevent further input on the form?
What about
$(function() {
  $(document).on('keydown', function(event) {
    if (event.keyCode == 9) {
      event.preventDefault();
    }
  });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
julianH, if you look at my second post, I have tried event.preventDefault() and it didn't work somehow.

This form is being submitted as POST, and frankly, I'm just trying to be clean with the way I write my app, plugging loopholes I see. A form submission doesn't take that long, and this TAB problem won't be an issue 99.99% of the time because the user won't have much opportunity to do so.

As I mentioned before, I am already using an overlay <div> to cover up the entire form so that the user can't interact with the form anymore. After having gone through the trouble of doing that, disabling the fields would then make my overlay redundant, that's what I meant by tedious.

Thanks for your input and help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.