Como definir o foco para a primeira entrada de texto em um modal de bootstrap após mostrado

Eu carrego um modal de bootstrap dinâmico e contém algumas entradas de texto. O problema que enfrento é que quero que o cursor se concentre na primeira entrada neste modal, e isso não está acontecendo por padrão.
Então, escrevi este código para fazer isso:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

Mas agora ele se concentra na entrada por um momento e depois desaparece automaticamente, por que isso está acontecendo e como resolver?

@scumah tem a resposta para você: Twitter bootstrap - concentre-se na textarea dentro de um modal com um clique

Para Bootstrap 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

Atualização: Para Bootstrap 3

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

========== Atualizar ======

Em resposta a uma pergunta, você pode usar isso com vários modais na mesma página se especificar diferentes destinos de dados, renomear seus IDs modais para corresponder e atualizar os IDs dos campos de entrada do formulário e, finalmente, atualizar seu JS para corresponder a esses novos IDs:
consulte http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

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

Achei a melhor maneira de fazer isso, sem jQuery.

<input value="" autofocus>

funciona perfeitamente.

Este é um atributo html5. Suportado por todos os principais navegadores.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

A resposta de David Taiaroa está correta, mas não funciona porque o tempo de "fade in" do modal não permite que você defina o foco na entrada. Você precisa criar um atraso:

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

})

O código usual (abaixo) não funciona para mim:

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

Encontrei a solução :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

veja mais aqui

Recebi que o bootstrap adicionou as seguintes informações na página:

Devido à forma como o HTML5 define sua semântica, o atributo autofocus HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado:

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

http://getbootstrap.com/javascript/#modals

Este é o código simples que funcionará melhor para você em todos os pop-ups que tenham qualquer campo de entrada com foco

$(".modal").on('shown.bs.modal', function () {
    $(this).find("input:visible:first").focus();
});

Acho que a resposta mais correta, assumindo o uso de jQuery, é uma consolidação de aspectos de todas as respostas desta página, mais o uso do evento que o Bootstrap passa:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

Igualmente trabalharia mudando $(document)para $('.modal')ou para adicionar uma classe para o modal que os sinais de que esse foco deve ocorrer, como$('.modal.focus-on-first-input')

tente este código, pode funcionar para você

$(this).find('input:text')[0].focus();

Primeiro passo, você deve definir seu autofocusatributo na entrada do formulário.

<input name="full_name" autofocus/>

E então você tem que adicionar uma declaração para definir o foco automático de sua entrada depois que seu modal for mostrado.
Experimente este código:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

Se você deseja focar automaticamente qualquer modal que foi aberto, você pode colocar em seus padrões ou funções lib este trecho que se concentrará na primeira entrada:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').focus();
})

se você estiver procurando por um snippet que funcione para todos os seus modais e procurar automaticamente pelo primeiro texto de entrada no aberto, você deve usar isto:

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

Se o seu modal for carregado usando ajax, use este:

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

esta é a solução mais geral

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• funciona com modais adicionados ao DOM após o carregamento da página
• funciona com input, textarea, select e não com o botão
• omite oculto, desativado, somente leitura
• funciona com modais desbotados, sem necessidade de setInterval

Tente remover a propriedade tabIndex do modal , quando sua caixa de entrada / texto estiver aberta. Volte ao que sempre foi , quando você fecha a caixa de entrada / texto. Isso resolveria o problema independentemente da versão do bootstrap e sem comprometer o fluxo de experiência do usuário .

De acordo com a documentação do Bootstrap 4:

Devido à forma como o HTML5 define sua semântica, o atributo autofocus HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado.

Por exemplo:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

Link .

Use o foco automático para pesquisar o elemento de formulário correto:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• É o "#button" que chama o formulário modal,

• "#mymodal" é a forma modal,

• "#myinput" é a entrada que você deseja obter foco