jQuery: keyup for TAB-key?

Question

So, i'm having some trouble getting my script to run IF the Tab key is pressed. After some quick googling, the charcode for Tab is 9. Also, while we're talking, is there any better ways of checking if a key is pressed without using charcodes? I'm asking because i keep getting the following Warning by firebug when using charcode:

The 'charCode' property of a keyup event should not be used. The value is meaningless.

Anyway, it still works, so that's not the problem. This is the code i use:

$('/* my inputs */').keyup(function(e) {
   console.log('keyup called');
   var code = e.keyCode || e.which;
   if (code == '9') {
     console.log('Tab pressed');
   }
});

Using the above code the console is left blank, nothing is added (using Firebug). Of course i've tried actually doing stuff instead of logging text, but nothing executes. So can anyone see why this isn't working? Is there a better way of checking if a key is pressed?

Thanks in advance.

Solution 1

My hunch is that when you press the tab key, your form's input loses focus, before the keyup happens. Try changing the binding to the body, like this:

 $('body').keyup(function(e) {
    console.log('keyup called');
    var code = e.keyCode || e.which;
    if (code == '9') {
    alert('Tab pressed');
    }
 });

Then, if that works (it does for me) try changing the binding to keyDown, instead, and return false. That way you can implement your own custom behavior.

$('.yourSelector').keydown(function(e) {
   console.log('keyup called');
   var code = e.keyCode || e.which;
   if (code == '9') {
     alert('Tab pressed');

   return false;
   }

});

One of these two should work... if it's body, you could attach a keydown handler on body, then if it's tab, find the field with focus (I think there's function .hasFocus()?), and if it's the one you want, proceed and return false. Otherwise, let the browser do its thing.

If you wanted to update the field WITH a tab character, try this in your callback:

var theVal = $(this).val();
theVal = theVal + ' ';
$(this).val(theVal);

Haven't tested it, but it should work. You could also append 3 or 4 spaces instead of the tab character, if it's giving you trouble.

Solution 2

e = e || window.event;
if(e.keyCode == 9)
 alert("Tab pressed");

Try this

Comments

[qwerty]

The selector i use is: $('.nameOfTheForm input')

[qwerty]

Still doesn't work. I tried using other keys to (tried enter(13) and page-down(34)), but none seem to work. I know the keyup is called though, so it's something in there.

[AlanFoster]

Alert e.keyCode then, and see what's happening.

[qwerty]

You were right, the input loses focus before the keydown is executed. I changed the keyup to keydown and it works like it should now. Thanks, man!

[qwerty]

Hm, i stumbled upon another problem now. Using return false; i can't use the input's, which makes it kind of useless. I tried preventDefault, but it doesn't seem to work either. Is there any way of bypassing that?

[Chris Ladd]

I'm assuming you want to append a 'tab' character to the input, right? I added a code example to my answer.

[qwerty]

Oh god, i forgot to tell you what i was going to use it for. No, i want to focus on the next input field within the current form. By default you have to press Tab two times to get to the next input (i think it has to do with using a table for the form structure), and a client of mine want it to work as normal (one click). Thanks for the help, i appreciate it. Here's the code i use now: pastebin.com/tKsZHy4s (EDIT: Ignore the console.log() wraping the code, it's not suppose to be there.)

[qwerty]

Yes, except i can't type in the input fields because of the "return false".

[qwerty]

Oh, nevermind! I moved the "return false" into the if statement, now it works like a charm. Thanks again for the help, accepted your answer.

[Robin Green]

@qwerty For the actual problem you had, you could have just set the tabindex attributes on the inputs. No need for Javascript at all.

[Eugene Kuzmenko]

you should read the jQuery documentation better, "which" is already normalized in jQuery, so there's absolutely no need for var code = e.keyCode || e.which;

[rlemon]

if (code == '9') { invokes type coercion. should be if( code === 9 )

[KyokoHunter]

Depending on how you need to change the default event behaviour, you may want to use event.preventDefault() instead of return false;. The answer on this StackOverflow question has some great information on this.