I want to focus an input element when a div is clicked.

My HTML looks like this:

<div class=placeholder_input>

    <input type=text id=username maxlength=100 />

    <div class=placeholder_container>

        <div class=placeholder>username</div>

    </div>

</div>

And my script is:

$(#username).focus(function() {

    $(this).next().hide();

});



$(.placeholder_input).mousedown(function() {              

    $(this).children(:first).focus();

});

When I click into the textbox, the placeholder text disappears correctly, but the blinking cursor doesn't show in the textbox. (and I can't type any text into the textbox)

Inside of the mousedown event handler, the $(this).children(:first) expression selects the correct input element, so I have no idea why the focus() call doesn't work.