il tasto shift viene semplicemente ignorato dopo che un altro tasto è stato premuto, povero tasto shift. Come posso rilevare quando viene rilasciato?

Question

Ho un input di testo, che diventa trasparente quando un utente preme shift (keydown) e lega un listener per il tasto shift che va su

ie.

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

Questo funziona bene quando non vengono premuti i caratteri nel frattempo tra deprimente e rilasciando il tasto shift. Il problema è che quando lo shift è giù e viene premuto un altro carattere, il tasto Maiusc sembra essere stato completamente dimenticato. Quando viene rilasciato il tasto Maiusc, non si attiva alcuna interruzione di chiave.

Ho tentato di attivare un keydown "falso" con la proprietà .which impostata su 16, per spostare leggermente verso destra dopo la pressione di altri caratteri, ma senza successo.

Qualsiasi suggerimento sarebbe molto apprezzato!

Answer 1

Premendo spostamento, sarà continuamente innescare keydown eventi fino a quando lo si rilascia, così il vostro esempio si legherà il maggior numero di keyup gestori in quanto vi sono keydown eventi attivati. Questo molto probabilmente causerà tutti i tipi di problemi strani.

Invece, hanno aderito entrambe le keydown e keyup per lo stesso gestore e fare la tua magia in là:

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

Vedi test case on jsFiddle.

Tuttavia, se si perde la messa a fuoco dell'ingresso mentre si preme shift e quindi rilasciato, non funzionerà come previsto. Un modo per risolverlo è quello di legarsi a window invece:

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

Vedi test case on jsFiddle.