jQuery keyup ignores tab

Hi,

Firstly, sorry I only have 195 points to spare :(

I've written some jQuery code to make a table editable.
All works well, except one really annoying point; I can't seem to capture the Tab key to move to the next field.
I can do this fine with the Enter key, but I'd rather use Tab as this is more expected behaviour.
(Especially as the Tab key is supposed to work, but I can't get it to!).

The important part of the code is shown below.

Thanks all for any suggestions!
$editField.keyup(function(event) {
            event.preventDefault();
            var key = event.keyCode;
            // the following line only works for CR, not TAB :(
            if (key == 13 || key == 9) {
                // return or tab key pressed
                $(this).parent().parent().next().find('.editableText').trigger('click');
                $(this).trigger('blur');
            }
        });

Open in new window

LVL 8
bukkoAsked:
Who is Participating?
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.

StealthyDevCommented:
Try using 11 also?

if (key == 13 || key == 9 || key == 11)

Regards.
0
StealthyDevCommented:
Or, you can try using the onblur function of the text object.

Regards.
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
StealthyDevCommented:
And, finally, You can capture it from onkeydown event of the TextBox...

Regards. :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

bukkoAuthor Commented:
Thanks for the replies.

I tried key code 11, with the same result.
Using onblur might work, if I could be sure that the tab button caused the event to fire - how can I do that?
Keydown seems to behave the same as keyup, i.e. no improvement.

Thanks for the help so far. :)

0
bukkoAuthor Commented:
I think I know why this is.

As the jQuery API site says, "...the event is only sent to the element that has the focus."
Pressing tab gives the focus to the next available control!!

I think I'm going to have to bind keyup at document level so that it always fires.
Will try it and post results.
0
bukkoAuthor Commented:
Nope, tried binding to the document and the body; in both cases the tab didn't work but other keys did (including capslock!).

Please let me know if you think of something!

Thanks...
0
Steve KrileCommented:
I think the tab key is not captured on the Keyup event since keyup only looks for "characters".  I got this from a blog and it's helpful.

The answer I think is to use keydown() if you want to capture tabs.


http://www.bloggingdeveloper.com/post/KeyPress-KeyDown-KeyUp-The-Difference-Between-Javascript-Key-Events.aspx

In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button.  In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.
0
StealthyDevCommented:
Hi, try this: (KeyDown must work!)

<input onkeydown = "alert(event.keyCode);">

0
bukkoAuthor Commented:
Skrile,
thanks, although that is really talking about keypress only capturing characters rather than keyup.
Keydown is in fact the better choice though because it fires before the default action, so the event is run from the original element, not the 'tabbed-to' one (if you see what I mean!)

senthurpandian,
that javascript works fine, but I need a jQuery equivalent.
The main problem is the firing order of events, because my tab key causes a new input field to be created on the table row below, which then has a 'focus' event.

I have managed to achieve what I need now, by using keydown and rejigging the code slightly.

senthurpandian was the first to point this out, so I'll award him the points.

Thanks all for your suggestions.
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
jQuery

From novice to tech pro — start learning today.

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.