javascript - 使用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()andclick()方法：

$(".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();
});​