Bootstrap Twitter-Focus sur textarea à l'intérieur d'un modal sur le clic

je voulais en avoir une version déclarative, donc je suis allé avec la suivante:

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

vous pouvez alors simplement ajouter une propriété data-modalfocus à votre champ, comme suit :

<input type="text" data-modalfocus />

et quand le modal apparaît, votre champ se focalisera.

Bootstrap3

$(window.document).on('shown.bs.modal', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

Bootstrap 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

vous pouvez utiliser l'élément autofocus html pour définir l'autofocus.

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

Violon ici (Clic)

si votre modal possède la propriété "fade":

cela va fonctionner, mais vous pourriez avoir à ajuster la durée de la temporisation et évidemment les IDs où nécessaire:

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

j'avais des problèmes majeurs avec chrome... J'espère que cela aide 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);

    });

comme mentionné dans l'un des commentaires, vous devez supprimer fade de votre modal. Donc cela fonctionne pour moi:

 <div id="myModal" class="modal">
    ...
    <textarea class="form-control" rows="5" id="note"></textarea>
  </div>

  <script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#note').focus();
    })
  </script>

je voulais quelque chose de plus générique

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

avec ceci, je donne n'importe quel contrôle que je veux la classe CSS premier débit. Il y a un léger retard dans la mise au point qui lui donne un certain flair.

Je ne sais pas pourquoi, mais la solution choisie ne fonctionne pas pour moi.. J'utilise l'extrait de code suivant à la place:

$('#annul-modal').on('show', function() {
    setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});

je sais que ce n'est pas si joli, mais au moins ça marche.. Bootstrap v2.3.0

si vous utilisez bootstrap v3 et que vous utilisez à la fois le Dialogue modal et l'éditeur de texte wysihtml5, les travaux suivants (en supposant que #basic est L'ID de votre forme modale):

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

Fixation de l'événement directement à l'écran modal n'a pas fonctionné pour moi. J'utilise ce code à la place:

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

avec ce code j'ai seulement besoin de changer myField pour l'id du contrôle que je veux avoir le focus, il me permet aussi de définir le focus pour les écrans modaux multiples, j'ai quelque chose comme:

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

Source http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

Trouvé en train de faire:

$(document).on('shown.bs.modal', function () {
  $(this).find('.form-control:visible:first').focus();
});

fonctionne bien car il trouve juste la première forme-contrôle plutôt que d'avoir besoin d'un id spécifique, etc. Être juste ce qui est nécessaire la plupart du temps.

<a href="" id="btnmoverCategoriaRaiz">Mover para a raiz...</a> 
      <script>
         $(function(){
            $("#btnmoverCategoriaRaiz").click(function(){
                $("#novoPlaylist").modal();
                return false;
            });
         });

       </script>    
 <div id="novoPlaylist" class= "modal  hide">
          <div class="modal-header">
            <h3>Novo Playlist</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
            </form>
          </div>
              <div class="modal-footer">
                 <a href="javascript:;" class="btn" data-dismiss="modal">Cancelar</a>
                 <a href="javascript:;" class="btn btn-primary" id="SalvarNomePlaylist" data-loading-text="Aplicando..."> Savar</a>
              </div>
      </div>