jQuery: Uzyskanie nowej wartości w obsłudze keydown

Question

Natknąłem się na to pytanie: onKeyPress Vs. onKeyUp and onKeyDown, z którego dowiedziałem się, że keypress ma być uruchamiany po wpisaniu znaku do tekstu. Próbuję uruchomić ten poniższy kod. Ma on sprawić, by tło wejściowe było żółte w momencie, gdy jego długość tekstu przekroczy 0, lub białe w momencie, gdy wynosi 0. Nie mogę sprawić, żeby działało. Gdy próbuję zrobić keydown, mam następujące problemy:

1. Gdybym wpisz jeden znak i puścić, tło pozostaje biały.

2. Jeśli w takim razie naciśnij backspace, usuwając tę ​​jedną znak, zmieni się na żółtą (dokładnie naprzeciwko tego, czego chcę!). Jeśli teraz naciśnie dowolny inny klucz (Alt, Shift), zmieni kolor na biały. W rzeczywistości, jeśli zamiast Alt lub Shift wpisuję znak, pozostanie on biały, przenosząc nas z powrotem do pierwszego problemu.

3. Po naciśnięciu klawisza znaku i przytrzymaniu go, tło pozostaje białe dla pierwszego znaku i zmienia kolor na żółty, począwszy od drugiego znaku.

Gdy próbuję keyup tylko, są to problemy (zgodnie z oczekiwaniami):

1. W tle nie zmieni tak długo, jak klucze są przechowywane wciśnięty, nawet wtedy, gdy postać jest dodawany do puste dane wejściowe lub cały tekst został usunięty.

Jeśli spróbuję keypress, napotkam te same problemy co keydown, nawet jeśli ma działać.

Jeśli wiążę 3 ładowarki dla keyup, keydown i keypress (! Bóg Jestem zdesperowany), prawie wszystkie problemy zostały rozwiązane z wyjątkiem problemu 3 z keydown: gdybym typu prasy klucz znaków i przytrzymać go, tło pozostaje biały dla pierwszej postaci i zmienia kolor na żółty, począwszy od drugiego znaku.

Jak rozwiązać ten 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

Gdy keyDown zdarzenie jest zwolniony, postać nie jest jeszcze napisane na polu wprowadzania.

Zrobiłem kilka badań i zaleca się stosowanie timeout, aby uzyskać pożądane zachowanie. Wydaje się, że podczas niewielkiego opóźnienia zostało wywołane zdarzenie change na wejściu, a następnie .val() zwraca nową zawartość.

Oto kod działa:

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

Towarzyszy jsFiddle