使用jQuery聚焦输入元素，但光标不显示。

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()调用不起作用。

- Zsolt

Answer 1

使用 mousedown 方法无效；不过，使用 mouseup() 和 click() 方法是有效的：

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

JS Fiddle演示。

还有：

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

JS Fiddle demo。

参考资料：

• click()。
• mouseup()。

- David Thomas

Answer 2

如果你坚持使用mousedown，则将焦点延迟到下一个节拍。

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

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

- bentael

Answer 3

mousdown 不起作用，请使用 click。

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

- thecodeparadox