JavaScript/JQuery - Detect Shift + Tab with blur() event

Question

there is a input where blur() event is trigger, and this input, i want to detect if was triggered with a Tab key, shift+tab keys or a click out. Detecting with just Tab key and click out, i've got. But the Shift+Tab keys, i couldn't. i've tried detect with window.event.shiftKey, or using on() of JQuery's method, and attach keyup, keydown, keypress to see if detect one first of the other. But, was unsuccessful. How can i detect this ?

I built these codes, but no one works:

1.

var shift_key; var key = window.event.keyCode;
$("#address").on('focusout blur keyup keydown keypress',function(e){
    if(e.type == 'keyup' || e.type == 'keydown' || e.type == 'keypress'){
     if(key == 16){
      shift_key = true;
     }
    }else if((e.type == 'focusout' || e.type == 'blur') && key == 9){
      if(shift_key == true){
       document.getElementById('city').focus();
      }
    }
  });

(This one, i tried to catch one the Shift code and after the Tab code. 'Cause when triggers a key event he doesn't blur of the input, so, i tried to catch in keyup, keydown or keypress the Shift key. And when the Tab were pressed, it automatically blur of the input, so, i tried to catch the Tab key)
```
$("#address").on("keyup keydown keypress", function () {
    var shift_key = key;
    setTimeout(function(){
    $("#address").on("blur focusout", function () {
        var shift_key = key;
    });
    }, 400);
});
```

JavaScript multiple keys pressed at once https://stackoverflow.com/questions/5203407/javascript-multiple-keys-pressed-at-once could help — TheViralGriffin, Aug 08 '18 at 18:32

score 3 · Accepted Answer · answered Aug 08 '18 at 18:39

This maybe what you want will detect which type of event was used to leave the input.

$("#z").on('keydown blur', function(e) {
  if (e.shiftKey && e.keyCode === 9) {
    console.log('shift tab')
    return false;
  } else if (e.keyCode === 9) {
    console.log('tab')
    return false;
  } else if(e.type == 'blur')  {
    console.log('mosueOUt')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="z" />

score 2 · Answer 2 · answered Aug 08 '18 at 18:39

Maybe something like this is what you are looking for?

var tabKey = false, 
    shiftKey = false;

$('#input').on('blur', function(e) {
  if(tabKey) {
    if(shiftKey) {
      console.log('Blurred by shift + tab');
    }
    else {
      console.log('Blurred by tab');
    }
  }
  else {
    console.log('Blurred by mouse');
  }
  
    tabKey = shiftKey = false;
});

$('#input').on('keydown', function(e) {
  tabKey = e.which === 9 ? true : false;
  shiftKey = e.shiftKey;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" />

score 0 · Answer 3 · edited Aug 08 '18 at 20:35

You don't need to store the shift key. You can use e.shiftKey

    $("#address").on('focusout blur keyup keydown keypress',function(e){
        if(e.type == 'keyup' || e.type == 'keydown' || e.type == 'keypress'){
    /*
         if(key == 16){
          shift_key = true;
         }
    */
        }else if((e.type == 'focusout' || e.type == 'blur') && e.key == 9){
          if(e.shiftKey){
           document.getElementById('city').focus();
          }
        }
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Address
<input id="address" />
City
<input id="city" />

JavaScript/JQuery - Detect Shift + Tab with blur() event

3 Answers3