focus() elemento di input con jQuery, ma il cursore non appare

Question

Voglio mettere a fuoco un elemento di input quando si fa clic su un div.

mio HTML simile a questa:

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

E il mio script è:

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

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

Quando clicco nella casella di testo, il testo segnaposto scompare in modo corretto, ma il cursore lampeggiante non mostra nella casella di testo. (E non riesco a digitare il testo nella casella di testo)

All'interno del gestore mousedown eventi, l'espressione $(this).children(":first") seleziona l'elemento di input corretto, quindi non ho idea del perché la chiamata focus() non funziona.

Answer 1

Non funziona con il metodo mousedown; lo fa, però, il lavoro con i metodi mouseup() e click():

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

JS Fiddle demo.

E:

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

JS Fiddle demo.

Riferimenti:

• click().
• mouseup().

Answer 2

mousdown non funziona, utilizzare click.

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

Answer 3

se ti ostini a usare mousedown, ritardare la messa a fuoco fino alla prossima tick

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

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