Focus() с помощью jQuery, но курсор не отображается

Я хочу сфокусировать входной элемент при нажатии на div.

Мой HTML выглядит так:

<div class="placeholder_input">
    <input type="text" id="username" maxlength="100" />
    <div class="placeholder_container">
        <div class="placeholder">username</div>
    </div>
</div>

И мой script:

$("#username").focus(function() {
    $(this).next().hide();
});

$(".placeholder_input").mousedown(function() {              
    $(this).children(":first").focus();
});

Когда я нажимаю текстовое поле, текст заполнителя корректно исчезает, но мигающий курсор не отображается в текстовом поле. (и я не могу напечатать текст в текстовом поле)

Внутри обработчика события mousedown выражение $(this).children(":first") выбирает правильный элемент ввода, поэтому я понятия не имею, почему вызов focus() не работает.

Ответ 1

Он не работает с методом mousedown; он работает, однако, с mouseup() и click():

$(".placeholder_input").mouseup(function() {              
    $(this).children(":first").focus();
});

JS Fiddle demo.

и

$(".placeholder_input").click(function() {              
    $(this).children(":first").focus();
});

JS Fiddle demo.

Литература:

click().
mouseup().

Ответ 2

если вы настаиваете на использовании mousedown, задержите фокусировку до следующего тика

$(".placeholder_input").mousedown(function() {              
      var $el =  $(this).children(":first");
      setTimeout(function() {
          $el.focus();
      }, 0);
});

http://jsfiddle.net/wpnNY/46/

Ответ 3

mousdown не будет работать, используйте click.

$(".placeholder_input").click(function() {              
    $(this).children(":first").focus();
});