web-dev-qa-db-fra.com

élément d'entrée focus () avec jQuery, mais le curseur n'apparaît pas

Je veux mettre l'accent sur un élément d'entrée lorsqu'un div est cliqué.

Mon HTML ressemble à ceci:

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

Et mon script est:

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

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

Lorsque je clique dans la zone de texte, le texte de l'espace réservé disparaît correctement, mais le curseur clignotant ne s'affiche pas dans la zone de texte. (et je ne peux pas taper de texte dans la zone de texte)

À l'intérieur du gestionnaire d'événements mousedown, l'expression $(this).children(":first") sélectionne l'élément d'entrée correct, donc je n'ai aucune idée de la raison pour laquelle l'appel focus() ne fonctionne pas.

javascriptjqueryhtmlfocuscursor
15
Zsolt

Cela ne fonctionne pas avec la méthode mousedown; il fonctionne cependant avec les méthodes mouseup() et click() :

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

JS Fiddle démo .

Et:

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

JS Fiddle démo .

Références:

13
David Thomas

si vous insistez pour utiliser mousedown, retardez le focus jusqu'au prochain tick

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

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

5
bentael

mousdown ne fonctionnera pas, utilisez click.

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