JavaScriptJQuery - Detect Shift + Tab with blur() event - Stack Overflow

admin管理员组

文章数量:1303343

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();
      }
    }
  });

2. (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);
   });
   

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();
      }
    }
  });

2. (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
• jquery

Share Improve this question Follow edited Aug 8, 2018 at 18:21 L.Th asked Aug 8, 2018 at 17:59 L.ThL.Th 10333 silver badges99 bronze badges 3

• please post the code that you've tried – ControlAltDel Commented Aug 8, 2018 at 18:01
• I updated my question – L.Th Commented Aug 8, 2018 at 18:16
• JavaScript multiple keys pressed at once stackoverflow./questions/5203407/… could help – TheViralGriffin Commented Aug 8, 2018 at 18:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="z" />

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" />

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Address
<input id="address" />
City
<input id="city" />

本文标签： JavaScriptJQueryDetect ShiftTab with blur() eventStack Overflow