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

Question

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.

Answer 1

Use .keyup() event because when you first press (keydown), the letter is never typed so the var html is getting previous value. For second part you can bind keypress event in document to focus your input field.