Keydown只有真人物?

时间:2012-01-05 12:53:26

标签: javascript jquery keyboard keydown

简单的问题: 我有内部标签的输入字段!就像这个站点右上角的搜索框一样。当我开始在里面输入标签时,它就被隐藏了。

出于可访问性原因,我的实际标签绝对位于实际输入字段后面。因此,我只需在输入字段中添加一个类fill,使背景颜色不再透明。

inputs.keydown(function (e) {
     $(this).addClass(fill);
});

除了一点点缺陷外,一切正常。 每当我对输入字段进行聚焦并点击“Shift”,“Ctrl”或“CMD”等键时标签就会消失。但是这还没有输入!

知道怎么做吗?

inputs.keydown(function (e) {
        switch (e.keyCode) {        
            case 13: // Enter
            case 16: // Shift
            case 17: // Ctrl
            case 18: // Alt
            case 19: // Pause/Break
            case 20: // Caps Lock
            case 27: // Escape
            case 35: // End
            case 36: // Home
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down

            // Mac CMD Key
            case 91: // Safari, Chrome
            case 93: // Safari, Chrome
            case 224: // Firefox
            break;
        }

        $(this).addClass(fill);
    });

这些将是我不想模糊标签的所有密钥代码!就在输入真实字符时,应该添加填充类。 顺便说一句。在所有情况下编写那些switch语句是否有更好的语法?

3 个答案:

答案 0 :(得分:4)

如果您正在处理字符输入,请使用keypress()。它已经忽略了大多数你想要避免的键。它会在Enter处触发,但您可以通过此处提出的相同方式轻松解释。

$("input").keypress(function (e) {
    if( e.which == 13 ){ return false; }
    $(this).addClass(fill);
}

答案 1 :(得分:2)

这只会在没有命中的情况下执行addClass:

inputs.keydown(function (e) {
    switch (e.keyCode) {        
        case 13: // Enter
        case 16: // Shift
        case 17: // Ctrl
        case 18: // Alt
        case 19: // Pause/Break
        case 20: // Caps Lock
        case 27: // Escape
        case 35: // End
        case 36: // Home
        case 37: // Left
        case 38: // Up
        case 39: // Right
        case 40: // Down

        // Mac CMD Key
        case 91: // Safari, Chrome
        case 93: // Safari, Chrome
        case 224: // Firefox
        break;
        default:
          $(this).addClass(fill);
        break;
    }
});

但是既然你正在使用jquery并想要一个更小的解决方案,试试这个:

inputs.keydown(function (e) {
  if($.inArray(e.keyCode,[13,16,17,18,19,20,27,35,36,37,38,39,40,91,93,224])) return;
  $(this).addClass(fill);
});

答案 2 :(得分:0)

您可以做的是获得按键前后的文字长度,看看是否有差异。如果有,则是真正的char或粘贴事件,在这种情况下,您需要应用背景颜色。

即。类似的东西:

var dataLength = 0;

// use keyup instead of keydown to ensure that we catch the event after the data has been entered
inputs.keyup(function (e) { 
   if($(this).val().length != dataLength) $(this).addClass(fill);

   ... 

   dataLength = $(this).val().length;

   // re-apply placeholder text if no text
   if(dataLength == 0) $(this).removeClass(fill);
}

更好的是,使用jQuery textchange事件插件。 http://www.zurb.com/playground/jquery-text-change-custom-event