asked on

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

StealthyDev

Try using 11 also?

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

Regards.

ASKER CERTIFIED SOLUTION

StealthyDev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

StealthyDev

And, finally, You can capture it from onkeydown event of the TextBox...

Regards. :)

bukko

ASKER

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. :)

bukko

ASKER

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.

bukko

ASKER

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...

Steve Krile

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.

StealthyDev

Hi, try this: (KeyDown must work!)

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

bukko

ASKER

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.