elepil
asked on
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:
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.
Currently, I'm doing it like this on the 'keyup' event:
if (event.keyCode === 9 && bBusy) {
$("html").focus();
}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.
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?
Or throw up a semi-opaque overlay over the form so it can't be accessed?
ASKER
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?
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
Open in new window
It's not working either.