javascript - jQuery:在 keydown 处理程序中获取新值

Question

我遇到了这个问题:onKeyPress Vs. onKeyUp and onKeyDown ，从那里我发现 keypress 应该在文本输入中输入字符时触发。我正在尝试运行以下代码。它应该在输入的文本长度超过 0 时使输入背景变为黄色，或者在文本长度超过 0 时使输入背景变为白色。我无法让它工作。如果我尝试执行 keydown，我会遇到以下问题:

1. 如果我只输入一个字符然后松开，背景将保持白色。

2. 如果那时，我按 backspace，从而清除了那个字符，它变成黄色(与我想要的正好相反!)。如果我现在按任何其他键(Alt、Shift)，它将再次变为白色。事实上，如果我输入一个字符而不是 Alt 或 Shift，它仍然会保持白色，这让我们回到第一个问题。

3. 如果我键入并按住一个字符键，第一个字符的背景保持白色，第二个字符开始变为黄色。

如果我只尝试 keyup，就会出现这些问题(正如预期的那样):

1. 只要按住按键，背景就不会改变，即使在空输入中添加一个字符或删除整个文本时也是如此。

如果我尝试 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' />

Answer 1

当 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