Keydown 仅适用于真实角色？答案

【问题标题】：Keydown only with real characters?Keydown 仅适用于真实角色？
【发布时间】：2012-02-03 07:03:57
【问题描述】：

简单的问题：我有带有内部标签的输入字段！就像这个网站右上角的搜索框一样。当我开始输入标签时，它是隐藏的。

出于可访问性的原因，我将真正的标签绝对放置在实际输入字段的后面。因此，我只是在输入字段中添加了一个 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 语句？

【问题讨论】：

jQuery 事件对象 api.jquery.com/category/events/event-object 具有 altKey,ctrlKey,metaKey,shiftKey 属性，您可能还想检查和处理这些属性。

标签： javascript jquery keyboard keydown

【解决方案1】：

如果您正在处理字符输入，请改用keypress()。它已经可以忽略大部分您想要避免的键。它确实会在Enter 触发，但您可以按照此处已经提出的相同方式轻松解释这一点。

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

【讨论】：

而且箭头似乎也不可靠：stackoverflow.com/questions/19347269/jquery-keypress-arrow-keys

【解决方案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);
});

【讨论】：

不做 if($.inArray(item, array)) 做 if($.inArray(item, array) !== -1)

【解决方案3】：

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

即比如：

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

【讨论】：