javascript - shift 键在另一个键被按下后被忽略，糟糕的 shift 键。我如何检测它何时发布？

Question

我有一个文本输入，当用户按下 shift(keydown)并绑定(bind)一个监听器以监听 shift 键时，它现在变得透明

即。

$('#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 键时，不会触发任何 keyup。

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

如有任何建议，我们将不胜感激!

Answer 1

当按下 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 .