Question

I’m trying to add a class (.active) to a text field once the user starts typing. I got it to work somewhat with the following code, but for some reason the .active class is not applied immediately when the user starts typing, it’s only applied after a second letter has been typed. Any ideas?

$(document).ready(function() {

    loginField = $('.field');

    loginField.live('keydown', function(){
        if ($(this).val()){
            $(this).addClass('active');     
        }
    });
}); 

Answer 1

You want keyup here, updated based on comments:

$(document).ready(function() {    
    $('.field').live('keydown', function(){
      $(this).addClass('active');
    }).live('keyup', function() {
      $(this).toggleClass('active', $(this).val() != '');
    });
}); 

Your .live() is firing correctly, but the .val() doesn’t change until keyup fires, keydown fires before the value is updated, so your if() isn’t true until the 2nd key is pressed.