我遇到了这个问题:onKeyPress Vs. onKeyUp and onKeyDown ,从那里我发现 keypress
应该在文本输入中输入字符时触发。我正在尝试运行以下代码。它应该在输入的文本长度超过 0 时使输入背景变为黄色,或者在文本长度超过 0 时使输入背景变为白色。我无法让它工作。如果我尝试执行 keydown
,我会遇到以下问题:
如果我只输入一个字符然后松开,背景将保持白色。
如果那时,我按
backspace
,从而清除了那个字符,它变成黄色(与我想要的正好相反!)。如果我现在按任何其他键(Alt
、Shift
),它将再次变为白色。事实上,如果我输入一个字符而不是Alt
或Shift
,它仍然会保持白色,这让我们回到第一个问题。如果我键入并按住一个字符键,第一个字符的背景保持白色,第二个字符开始变为黄色。
如果我只尝试 keyup
,就会出现这些问题(正如预期的那样):
- 只要按住按键,背景就不会改变,即使在空输入中添加一个字符或删除整个文本时也是如此。
如果我尝试 keypress
,我将面临与 keydown
相同的问题,即使它应该可以工作。
如果我为 keyup
、keydown
和 keypress
绑定(bind) 3 个处理程序(上帝,我很绝望!),几乎所有问题都解决了,除了问题keydown
的 3:如果我键入并按住一个字符键,第一个字符的背景保持白色,第二个字符开始变为黄色。
我该如何解决这个问题?
JS:
$(document).ready(function() {
$("input").bind("keydown", function() {
if ($(this).val().length == 0) {
$(this).css('background', 'white');
} else {
$(this).css('background', 'yellow');
}
});
$("input").bind("keypress", function() {
if ($(this).val().length == 0) {
$(this).css('background', 'white');
} else {
$(this).css('background', 'yellow');
}
});
$("input").bind("keyup", function() {
if ($(this).val().length == 0) {
$(this).css('background', 'white');
} else {
$(this).css('background', 'yellow');
}
});
});
HTML:
<input type='text' />
最佳答案
当 keydown 事件被触发时,字符还没有写入输入框。
我做了一些研究,建议使用 timeout
以获得您想要的行为。显然,在微小的延迟期间,输入上的 change
事件被触发,然后 .val()
返回新内容。
这是一个工作代码:
$(document).ready(function () {
var field = $("input");
field.on("keydown", function (e) {
setTimeout(function () {
if (field.val().length == 0) {
field.css('background', 'white');
} else {
field.css('background', 'yellow');
}
}, 1);
});
});
伴随着jsFiddle
关于javascript - jQuery:在 keydown 处理程序中获取新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18114752/