jQuery: Neuen Wert in Keydown-Handler bekommen

Question

Ich stolperte über diese Frage: onKeyPress Vs. onKeyUp and onKeyDown, von wo ich fand, dass keypress ausgelöst werden soll, wenn ein Zeichen in die Texteingabe eingegeben wird. Ich versuche den folgenden Code auszuführen. Es soll den Hintergrund der Eingabe gelb machen, sobald die Textlänge 0 überschreitet, oder Weiß, wenn es 0 ist. Ich kann es nicht funktionieren lassen. Wenn ich versuche, keydown zu tun, habe ich folgende Probleme:

1. Wenn ich nur ein Zeichen geben und loslassen, der Hintergrund weiß bleibt.

2. Wenn ich dann backspace drücke, lösche ich das ein Zeichen, es wird gelb (genau gegenüber von dem, was ich will!). Wenn ich jetzt eine andere Taste drücke (Alt, Shift), wird sie wieder weiß. In der Tat, wenn statt Alt oder Shift ich ein Zeichen eintippe, wird es immer noch weiß bleiben, was uns zurück zum ersten Problem bringt.

3. Wenn ich eine Buchstabentaste drücke und gedrückt halte, bleibt der Hintergrund für das erste Zeichen weiß und wird ab dem zweiten Zeichen gelb.

Wenn ich versuche keyup nur, das sind die Probleme (wie erwartet):

1. Der Hintergrund ändert sich nicht, solange die Tasten gedrückt gehalten werden, selbst wenn ein Zeichen hinzugefügt Die leere Eingabe oder der gesamte Text wurde gelöscht.

Wenn ich keypress versuche, habe ich die gleichen Probleme wie keydown, obwohl es funktionieren soll.

Wenn ich 3-Handler binden für keyup, keydown und keypress (! Gott, ich bin verzweifelt), die fast alle Probleme außer gelöst Problem 3 von keydown: Wenn ich drücken Sie eine Buchstabentaste drücken und gedrückt halten, bleibt der Hintergrund weiß für das erste Zeichen und wird gelb 2. Zeichen weiter.

Wie löse ich dieses Problem?

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

Wenn das keydown Ereignis ausgelöst wird, wird das Zeichen noch nicht auf das Eingabefeld geschrieben.

Ich habe einige Nachforschungen gemacht und es wird empfohlen, timeout zu verwenden, um das gewünschte Verhalten zu erhalten. Offensichtlich wird während der winzigen Verzögerung ein change Ereignis am Eingang ausgelöst, und .val() gibt dann den neuen Inhalt zurück.

Hier ist ein Arbeitscode:

$(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); 
    }); 
}); 

von einem jsFiddle