focus() Eingabeelement mit jQuery, aber der Cursor erscheint nicht

Question

Ich möchte ein Eingabeelement fokussieren, wenn ein div angeklickt wird.

Mein HTML sieht wie folgt aus:

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

Und mein Skript ist:

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

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

Als ich in das Textfeld klicken, wird der Platzhalter-Text korrekt verschwindet, aber der blinkende Cursor zeigt nicht in der Textbox. (Und ich kann keinen Text in das Textfeld eingeben)

Innerhalb der mousedown Ereignisbehandlungsroutine, der $(this).children(":first") Ausdruck das richtigen Eingabeelement auswählt, so ich habe keine Ahnung, warum der focus() Anruf nicht funktioniert.

Answer 1

Es funktioniert nicht mit der mousedown Methode; es funktioniert, aber die Arbeit mit den mouseup() und click() Methoden:

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

JS Fiddle demo.

Und:

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

JS Fiddle demo.

Referenzen:

• click().
• mouseup().

Answer 2

mousdown wird nicht funktionieren, verwenden Sie click.

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

Answer 3

wenn Sie darauf bestehen, mousedown verwenden, verzögern den Fokus bis zum nächsten Tick

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

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