18

For whatever reason I can't capture "SHIFT+TAB" combination. I am using the latest jQuery.

Same result if I use other ajax/javascript, etc.

Here is a simple example that should work as I currently understand it...

event.which or event.KeyCode are always "undefined" only shiftKey exists in a scenario involving a "SHIFT+TAB" or backward keyboard traversal, traditionally inherent in windows based apps/web or otherwise...

    function ShiftTab()
    {
      debugger;
      if(event.KeyCode == 9 && event.shiftKey) // neither this line nor the following work
//      if (event.which == 9 && event.shiftKey) // shift + tab, traverse backwards, using keyboard
      {
        return true;
      }
      else
      {
        return false;
      }
    }

this seems to be yet another item related to tab order that no longer works as it traditionally worked in Microsoft.Net WinForm/WebForm based apps.

John Farrell
  • 24,673
  • 10
  • 77
  • 110
Bohemian
  • 181
  • 1
  • 1
  • 3

3 Answers3

32

If you are using jQuery, this should be how the code is working. Make sure keyCode is lower case. Also, jQuery normalizes keyCode into which:

$(document).keyup(function (e) {
    if (e.which === 9 && e.shiftKey) {
        ShiftTab();
    }
});

If you're into terse JavaScript:

$(document).keyup(function (e) {
    e.which === 9 && e.shiftKey && ShiftTab();
});

jQuery 1.7+ on syntax:

$(document).on('keyup', function (e) {
    e.which === 9 && e.shiftKey && ShiftTab();
});
Eli
  • 17,397
  • 4
  • 36
  • 49
  • 3
    This will not always work, I mean, with keyup. And that is because, for example, I first let go of the shift tab. So that will return 9 and false, because tab is pressed but shift is not. If you let go first of tab, then it is ok. But with keydown it will work, cause you press tab and have the shift already pressed. – bokkie Sep 22 '14 at 09:49
  • This doesn't work for me regardless of the order I release `tab`. Not sure why my code won't recognize the `shift` key press in conjunction with `tab` – CIA Jun 10 '15 at 18:30
  • @CIA I think bokkie got you in his answer. But basically onKeyUp fires twice, once for each key (Shift and Tab). The event handler by default has no idea SHIFT is in any way special - it's just another key. You have to check for the event on KeyDown or KeyPress so you can check for SHIFT while tab is registered. – RoboBear Jan 05 '17 at 18:58
2

I created a function which I wired up to my button's onkeydown event. I used onkeydown, because onkeypress would not capture my tab key press

function ShiftTab(evt) {
        var e = event || evt; // for trans-browser compatibility
        var charCode = e.which || e.keyCode; // for trans-browser compatibility

        if (charCode === 9) {
            if (e.shiftKey) {
                $('#controlName').focus();
                return false;
            } else {
                   return true;
              }
       }

I took this approach to deal with two specific problems:

  1. onkeypress would not capture tab key press
  2. When click shift-tab, shift key press would trigger function, so I had nest the shiftkey modifier check
Adriang
  • 721
  • 1
  • 6
  • 12
0

use same code inside keypress event. the tab changes the element between keypress and keyup. here we get event.key = tab and event.shiftKey = true.

mukund patel
  • 1,039
  • 10
  • 31