KeyDown in jquery not updating when pressed

Question

I am trying to get the div to change the font size and update it on the screen. The following code works but there is a problem when you press a key you need to press another key to register the last key was pressed i dont know want that to happen. How would i make it update as soon as you press a key?

 $('#font_size_title').keydown(function() { 
 var font_size_title = $(this).val(); 
 $('#preview_title').css("font-size",font_size_title);
 }); 

Answer 1

Use the .keyup() event instead, like this:

$('#font_size_title').keyup(function() { 
  var font_size_title = $(this).val(); 
  $('#preview_title').css("font-size",font_size_title);
});

On keydown the value hasn't gotten the last letter yet, on keyup hoever, the value has been updated.

Answer 2

Try using .keyup() instead.

$('#font_size_title').keyup(function() { 
     // this.value is a little quicker than $(this).val()
   var font_size_title = this.value; 
   $('#preview_title').css("font-size",font_size_title);
}); 

This will register after the value has been entered. With keydown the input doesn't yet have the new value. That's why it takes another entry to get the last value.