44

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.

Jacob Relkin
  • 161,348
  • 33
  • 346
  • 320
qwerty
  • 575
  • 3
  • 6
  • 8

3 Answers3

83

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.

Chris Ladd
  • 2,795
  • 1
  • 29
  • 22
  • 1
    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 Jan 21 '11 at 19:36
  • 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? – qwerty Jan 21 '11 at 19:42
  • I'm assuming you want to append a 'tab' character to the input, right? I added a code example to my answer. – Chris Ladd Jan 21 '11 at 19:44
  • 1
    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: http://pastebin.com/tKsZHy4s (EDIT: Ignore the console.log() wraping the code, it's not suppose to be there.) – qwerty Jan 21 '11 at 19:54
  • Yes, except i can't type in the input fields because of the "return false". – qwerty Jan 21 '11 at 20:13
  • 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. – qwerty Jan 21 '11 at 20:16
  • @qwerty For the actual problem you had, you could have just set the tabindex attributes on the inputs. No need for Javascript at all. – Robin Green Apr 10 '12 at 12:11
  • 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;` – Eugene Kuzmenko Nov 16 '12 at 15:29
  • `if (code == '9') {` invokes type coercion. should be `if( code === 9 )` – rlemon Apr 10 '14 at 15:44
  • 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](https://stackoverflow.com/a/30473685/217311) has some great information on this. – KyokoHunter Aug 06 '20 at 11:04
1
e = e || window.event;
if(e.keyCode == 9)
 alert("Tab pressed");

Try this

AlanFoster
  • 8,156
  • 5
  • 35
  • 52
  • 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. – qwerty Jan 21 '11 at 19:08
  • Alert e.keyCode then, and see what's happening. – AlanFoster Jan 21 '11 at 19:10
-1

if nothing happens no matter what key you press, perhaps there is something wrong with the selector you are using? Can you verify you are selecting properly, perhaps with something like:

console.log($('/* my inputs */').length);
Karl Rosaen
  • 4,508
  • 2
  • 27
  • 30