javascript - 仅在按下另一个键(糟糕的Shift键)后，才忽略Shift键。如何检测何时发布？

我有一个文本输入，当用户按下shift键时，该输入变为透明，并为上移的Shift键绑定(bind)了一个监听器

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

当在按下和释放Shift键之间没有任何字符按下时，此方法可以正常工作。问题在于，当按下shift键并按下另一个字符时，似乎完全忘记了Shift键。松开Shift键时，不会触发任何按键。

我尝试使用.which属性设置为16触发“假”击键，以便在按下其他字符后向正确的方向微调，但无济于事。

任何建议将不胜感激!

最佳答案

在按住shift键的同时，它将持续触发keydown事件，直到您释放它为止，因此您的示例将绑定(bind)与触发的keyup事件一样多的keydown处理程序。这很可能会引起各种奇怪的问题。

而是将keydown和keyup都绑定(bind)到相同的处理程序，然后在其中进行处理:

$("#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。

但是，如果在按住shift键然后放开时失去了输入的焦点，它将无法按预期工作。解决它的一种方法是绑定(bind)到window:

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。

关于javascript - 仅在按下另一个键(糟糕的Shift键)后，才忽略Shift键。如何检测何时发布？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17447210/