Javascript 只使用真实角色的按键?
简单问题: 我有内部标签的输入字段!就像这个网站右上角的搜索框一样。当我开始在里面输入标签时,它是隐藏的 出于可访问性的原因,我将真正的标记绝对放置在实际输入字段的后面。因此,我只需在inputfield中添加一个类Javascript 只使用真实角色的按键?,javascript,jquery,keyboard,keydown,Javascript,Jquery,Keyboard,Keydown,简单问题: 我有内部标签的输入字段!就像这个网站右上角的搜索框一样。当我开始在里面输入标签时,它是隐藏的 出于可访问性的原因,我将真正的标记绝对放置在实际输入字段的后面。因此,我只需在inputfield中添加一个类fill,这样背景色就不再透明了 inputs.keydown(function (e) { $(this).addClass(fill); }); 除了一点瑕疵外,一切正常。 每当我聚焦输入字段并按“Shift”、“Ctrl”或“CMD”等键时,标签就会消失。然而,这还
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);
});
这些都是我不想模糊标签的钥匙码!就在键入实字符时,应该添加fill类。
顺便问一下,有没有更好的语法来编写所有情况下的switch语句 您可以做的是获取按键前后的文本长度,看看是否有差异。如果有的话,它是一个真正的字符或粘贴事件,在这种情况下,您需要应用背景色 i、 e.类似于:
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事件插件 这将仅在未命中任何大小写时执行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);
});
如果处理字符输入,请改用。它已经忽略了您想要避免的大多数关键点。它确实会在输入时触发,但您可以很容易地用这里已经提出的相同方式来解释
$("input").keypress(function (e) {
if( e.which == 13 ){ return false; }
$(this).addClass(fill);
}
jQuery事件对象具有altKey
、ctrlKey
、metaKey
、shiftKey
属性,您可能也需要检查和处理这些属性。不要执行if($.inArray(项,数组))执行if($.inArray(项,数组)!=-1)并且对于箭头来说似乎不可靠: