focus（）使用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()不能正常工作。

Answer 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()。

Answer 2

mousdown將不起作用，請使用click。使用mousedown

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

Answer 3

如果你堅持

，延緩焦點，直到下一個節拍

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

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