Die Umschalttaste wird ignoriert, nachdem eine andere Taste gedrückt wurde, schlechte Umschalttaste. Wie erkenne ich, wann es veröffentlicht wird?

Question

Ich habe eine Texteingabe, die derzeit transparent wird, wenn ein Benutzer Shift (Keydown) drückt und einen Listener für die Shift-Taste bindet, die nach oben geht

dh

.

Dies funktioniert, wenn in der Zwischenzeit zwischen Drücken und Loslassen der Umschalttaste keine Zeichen gedrückt werden. Das Problem ist, dass wenn die Schicht gedrückt ist und ein anderes Zeichen gedrückt wird, die Shift-Taste komplett vergessen wurde. Wenn die Umschalttaste losgelassen wird, wird keine Taste gedrückt.

Ich habe versucht, eine "gefälschte" Keydown mit der Eigenschaft .which auf 16 ausgelöst, um es in die richtige Richtung zu schieben, nachdem andere Zeichen gedrückt werden, aber ohne Erfolg.

Alle Vorschläge würden sehr geschätzt werden!

Answer 1

Während des Drückens Verschiebung, wird es auslösen kontinuierlich keydown Ereignisse, bis Sie ihn freigeben, so dass Ihr Beispiel so viele keyup Handler binden, da es keydown Ereignisse ausgelöst. Dies wird höchstwahrscheinlich alle Arten von seltsamen Problemen verursachen.

Stattdessen binden sowohl keydown und keyup auf den gleichen Handler und tun Sie Ihre Magie dort in:

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

test case on jsFiddle See.

Wenn Sie jedoch den Fokus der Eingabe verlieren, während Sie shift drücken und dann loslassen, wird es nicht wie erwartet funktionieren. Ein Weg, um es zu lösen ist zu window zu binden, statt:

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

test case on jsFiddle sehen.