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

Question

我遇到了这个问题:onKeyPress Vs. onKeyUp和onKeyDown,我发现keypress只要在文本输入中键入字符就会触发它.我试图运行以下代码.它应该在文本长度超过0时使输入的背景变为黄色,或者在它为0时使白色变为白色.我无法使其工作.如果我尝试做keydown,我有以下问题:

1. 如果我只输入一个字符放开,背景仍为白色.

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

3. 如果我键入按下一个字符键并按住它,则第一个字符的背景保持白色,然后变为黄色的第二个字符.

如果我keyup只尝试,这些是问题(如预期的那样):

1. 只要按下按键,即使将字符添加到空输入或删除整个文本,背景也不会改变.

如果我尝试keypress,我面临同样的问题keydown,即使它应该工作.

如果我绑定3个处理程序keyup,keydown和keypress(上帝我绝望),几乎所有的问题都解决了,除了问题3 keydown:如果我键入按下一个字母键不放,背景仍然是白色的第一个字符,而变成黄色第二个字符开始.

我该如何解决这个问题？

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