使用jQuery的focus()输入元素,但光标不会出现

Question

我想在单击div时聚焦输入元素.

我的HTML看起来像这样:

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

我的脚本是:

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

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

当我单击文本框时,占位符文本会正确消失,但闪烁的光标不会显示在文本框中.(我无法在文本框中输入任何文字)

在mousedown事件处理程序内部,$(this).children(":first")表达式选择正确的输入元素,因此我不知道为什么focus()调用不起作用.

Answer 1

它不适用于该mousedown方法; 但它可以使用mouseup()和click()方法:

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

JS小提琴演示.

和:

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

JS小提琴演示.

参考文献:

• click().
• mouseup().

Answer 2

如果你坚持使用mousedown,请将焦点延迟到下一个刻度

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

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