在按下另一个键之后,移位键被忽略,移位键不好.如何检测何时发布？

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键时,没有键盘触发.

我尝试触发.which属性设置为16 的'假'keydown,在按下其他字符后向右移动,但无济于事.

任何建议将不胜感激!

Answer 1

按下 时shift，它将连续触发keydown事件，直到您释放它为止，因此您的示例将绑定与触发的事件一样多的keyup处理程序keydown。这很可能会导致各种奇怪的问题。

相反，将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 上的测试用例。