klawisz Shift jest ignorowany po naciśnięciu innego klawisza, słabego klawisza Shift. Jak wykryć, kiedy jest wydany?

Question

Mam dane wejściowe, które obecnie stają się przezroczyste, gdy użytkownik naciśnie klawisz shift (keydown) i wiąże słuchacza dla klawisza shift, podnosząc go o

tj.

$('#foo').keydown(function(){ 
     if(event.which==16){ 
      //make #foo transparent 
      $(this).keyup(function(){ 
       if(event.which==16){ 
       //return #foo to its former glory 
       $(this).unbind('keyup'); 
       } 
      }); 
     }; 
    }) 

Działa to dobrze, gdy w międzyczasie między naciśnięciem a zwolnieniem klawisza Shift nie są naciskane żadne znaki. Problem polega na tym, że po przesunięciu w dół i naciśnięciu innego klawisza wydaje się, że klawisz Shift został zupełnie zapomniany. Po zwolnieniu klawisza Shift nie zostanie uruchomione żadne naciśnięcie klawisza.

Próbowałem wywołać "fałszywy" klucz keidown z właściwością .which ustawioną na 16, aby przesunąć go we właściwym kierunku po naciśnięciu innych znaków, ale bez skutku.

Wszelkie sugestie będą bardzo mile widziane!

Answer 1

Naciskając przesunięcie, będzie stale wywołać keydown zdarzenia do momentu zwolnienia go, więc Twój przykład zwiąże tyle keyup ładowarki, ponieważ istnieją keydown zdarzenia wyzwalany. To najprawdopodobniej spowoduje wszelkiego rodzaju dziwne problemy.

Zamiast wiązać zarówno keydown i keyup do tego samego przewodnika i zrobić swoją magię tam:

$("#foo").on("keydown keyup", function (e) { 
    if (e.which === 16) { 
     if (e.type === "keydown") { 
      // make #foo transparent 
     } else { 
      // return #foo to its former glory 
     } 
    } 
}); 

Zobacz test case on jsFiddle.

Jeśli jednak utracisz ostrość wejścia, naciskając shift, a następnie zwolnij, nie będzie działać zgodnie z oczekiwaniami. Jednym ze sposobów rozwiązania tego jest wiązać się window Zamiast:

var $foo = $("#foo"); 
var shiftPressed = false; 

$(window).on("keydown keyup", function (e) { 
    if (e.which === 16) { 
     shiftPressed = e.type === "keydown"; 
     if (shiftPressed && e.target === $foo[0]) { 
      $foo.addClass("transparent"); 
     } else { 
      $foo.removeClass("transparent"); 
     } 
    } 
}); 

$foo.on("focus blur", function (e) { 
    if (e.type === "focus" && shiftPressed) { 
     $foo.addClass("transparent"); 
    } else { 
     $foo.removeClass("transparent"); 
    } 
}); 

Zobacz test case on jsFiddle.