使用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/

Answer 3

mousdown不起作用，使用click 。

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