按下另一个键后，Shift键将被忽略，这太糟糕了。我该如何检测它何时被释放？

Question

我有一个文本输入框，当用户按下Shift键（keydown）时，它会变成透明，并绑定一个监听器以检测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 来触发“虚假” keydown，以在按其他字符后将其推向正确方向，但是没有用。

如有建议，将不胜感激！

- Justin

---

您缺少“event”参数。我猜这只是示例脚本中的笔误？ - Bergi

在你的标题中使用“poor shift key”，点个赞。 - Pattle

有了小错误修复，它对我来说运行得非常完美。你使用的是哪个jQuery版本和浏览器[版本]？ - Bergi

你使用的是哪个浏览器？对我来说很好用 http://jsfiddle.net/2tkDr/ - Sergio

Sergio，你说得很对，它可以工作。这完全是我的问题。抱歉。 - Justin

Answer 1

按下 shift 键时，会连续触发 keydown 事件，直到你松开它，因此你的示例将绑定与触发的 keydown 事件数量相同的 keyup 处理程序。这很可能会引起各种奇怪的问题。

相反，将 keydown 和 keyup 绑定到同一个处理程序中，并在其中执行您的操作：

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

查看 jsFiddle上的测试用例。

然而，如果您在按下shift键时失去输入焦点，然后释放，它将不能按预期工作。解决方法之一是绑定到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");
    }
});

请看 jsFiddle 上的测试用例。

- mekwall