简单的问题: 我有内部标签的输入字段!就像这个站点右上角的搜索框一样。当我开始在里面输入标签时,它就被隐藏了。
出于可访问性原因,我的实际标签绝对位于实际输入字段后面。因此,我只需在输入字段中添加一个类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语句是否有更好的语法?
答案 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