6

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

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 键时，不会触发 keyup。

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

任何建议将不胜感激！

4

1 回答 1

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 上的测试用例。

于 2013-07-03T21:35:50.223 回答