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?
 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.