Twitter bootstrap-Centrarse en textarea dentro de un modal en clic

Quería tener una versión declarativa de esto, así que fui con lo siguiente :

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

Entonces simplemente puede agregar una propiedad data-modalfocus a su campo, así:

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

Y cuando aparezca el modal, tu campo se enfocará.

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);
});

Puede utilizar el elemento html autofocus para establecer el enfoque automático.

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

El violín aquí (Clic)

Si su modal tiene la propiedad 'fade':

Esto funcionará, pero es posible que tenga que ajustar la duración del tiempo de espera y, obviamente, los ID cuando sea necesario:

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

Yo estaba teniendo problemas importantes en Chrome... Espero que esto ayude a alguien.

//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);

    });

Como se mencionó en uno de los comentarios, debe eliminar fade de su modal. Así que esto funciona para mí:

 <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>

Quería algo un poco más genérico

    $(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);
    });

Con esto, doy cualquier control que quiera a la clase CSS firstInput. Hay un ligero retraso en el establecimiento de enfoque que le da un cierto estilo.

No se por qué, pero la solución elegida no funciona para mí.. En su lugar, utilizo el siguiente fragmento de código:

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

Sé que no es tan bonito, pero al menos funciona.. Bootstrap v2. 3. 0

Si está utilizando bootstrap v3 y está utilizando tanto el diálogo modal como el editor de texto wysihtml5, lo siguiente funciona (suponiendo que #basic es el ID de su forma modal):

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

Adjuntar el evento directamente a la pantalla modal no funcionó para mí. Estoy usando este código en su lugar:

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

Con este código solo necesito cambiar MyField por el id del control que quiero tener el foco, también me permite definir el foco para múltiples pantallas modales, tengo algo así como:

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

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

Encontrado haciendo:

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

Funcionó bien, ya que solo encuentra el primer control de forma en lugar de necesitar un id específico, etc. Ser justo lo que se necesita la mayor parte del tiempo.

<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>