Simple .on('keydown') jQuery event not responding until next key is pressed

Simple .on('keydown') jQuery event not responding until next key is pressed

I'm making a page for a friend and I have a hidden text field and when the
user types the text is transposed into a div so that it looks like they're
typing on the screen rather than in an input field.
Here is a link to the page: http://merkd.com/godis.php
Here is the function that I use to respond to the key strokes:
$('#hiddenInput').keydown(function() {
var input = $('#hiddenInput').val();
var html = '<div style="float: left;">'+input+'</div><div
id="cursor">|</div>';
$('#typingArea').html(html);
});
The text-field is visible right now so that you can see the problem. When
text is entered or deleted, it doesn't respond until the next keypress. So
if I type a single letter, nothing shows up until I type the next letter.
I looked at the jQuery .on() documentation but I couldn't find anything on
this. Any help is much appreciated.
P.S. I know it should be in a separate question, but is there an easy way
to make a text-field always in focus? I want to make it so that no matter
where the user clicks or whatever, if they type, the text will still show
up.