6

私はこの質問に出くわしました: onKeyPress Vs. onKeyUp および onKeyDown、keypress文字がテキスト入力に入力されるたびに起動するはずの場所から。この次のコードを実行しようとしています。テキストの長さが 0 を超えた瞬間に入力の背景を黄色に、0 になった瞬間に背景を白くするはずですが、うまくいきません。しようとするとkeydown、次の問題があります。

  1. 1 文字だけ入力して放すと、背景は白のままです。

  2. 次に、 を押すbackspaceと、その 1 文字がクリアされ、黄色に変わります (私が望むものとは正反対です!)。ここで他のキーを押すと（Alt、Shift）、再び白くなります。実際、代わりに、AltまたはShift私が文字を入力すると、それはまだ白いままで、最初の問題に戻ります.

  3. 文字キーを押して押し続けると、最初の文字の背景は白のままで、2 文字目以降は黄色になります。

私が試しkeyupた場合、これらは問題です（予想どおり）：

  1. 空の入力に文字が追加されたり、テキスト全体が削除されたりしても、キーを押し続けている限り背景は変わりません。

を試してみると、動作するはずなのに とkeypress同じ問題に直面します。keydown

と の 3 つのハンドラーをバインドすると(神よkeyup、私は絶望的です!)、ほとんどすべての問題が解決されますが、問題 3 を除きます。 2キャラ目以降。keydownkeypresskeydown

この問題を解決するにはどうすればよいですか?

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' />
4

2 に答える 2

11

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を伴う

于 2013-08-07T22:38:43.480 に答える