Twitter bootstrap - Focus sur textarea dans un modal au clic

Question

Juste de commencer à jouer avec bootstrap et c'est incroyable.

Je suis en train d'essayer de comprendre cela. J'ai un textarea pour commentaires à l'intérieur d'une fenêtre modale. Il fonctionne très bien. Mais je veux le foyer pour aller sur la zone de texte lorsque vous cliquez sur le bouton pour activer le modal. Et je n'arrive pas à le faire fonctionner.

Voici un violon: http://jsfiddle.net/denislexic/5JN9A/4/

Voici le code:

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Voici le JS

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});​

Pour reprendre Quand je clique sur "Lancer le modal" je veux que le modal pour se montrer et de se concentrer pour aller sur le textarea.

Merci pour toute aide.

Answer 1

Cela ne fonctionne pas car lorsque vous cliquez sur le bouton de l'modal n'est pas encore chargé. Vous devez raccorder le focus sur un événement, et d'aller à l' amorçage du modals de la page , nous voyons l'événement shown, is fired when the modal has been made visible to the user (will wait for css transitions to complete). Et c'est exactement ce que nous voulons.

Essayez ceci:

$('#myModal').on('shown', function () {
    $('#textareaID').focus();
})
​

Voici votre violon mise à jour: http://jsfiddle.net/5JN9A/5/

---

Mise à jour:

Comme @MrDBA notes, dans le Bootstrap 3 le nom de l'événement est changé à l' shown.bs.modal. Donc, pour Bootstrap 3 utilisation:

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})

Nouveau jouer du violon pour Bootstrap 3: http://jsfiddle.net/WV5e7/

Answer 2

Vous pouvez utiliser l'élément autofocus html pour définir la mise au point automatique.

 <textarea id="textareaID" autofocus="" ></textarea>
 

Violon ici (Cliquez)

Answer 3

J'avais de gros problèmes en chrome ... J'espère que cela aidera quelqu'un.

 //When user clicks link
$('#login-modal-link').on('click',function() {
        setTimeout(function(){
                //If modal has class
            if ($('#login-modal').hasClass('modal')) {
                //Whatever input you want to focus in
                $('#user_login_modal').focus();
            }
        },100);

    });
 

Answer 4

Si votre modal a la propriété 'fade':

Cela fonctionnera, mais vous devrez peut-être ajuster la durée du délai d'attente et, bien entendu, les identifiants nécessaires:

 $("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });
 

Answer 5

Si vous utilisez bootstrap v3 et que vous utilisez à la fois une boîte de dialogue modale et l'éditeur de texte wysihtml5, les opérations suivantes (en supposant que #basic est l'ID de votre formulaire modal):

     $('#basic').on('shown.bs.modal', function () {
    editor.composer.element.focus()
})