Cómo establecer el enfoque en la primera entrada de texto en un modal de arranque después de mostrarse

Cargué un modal de arranque dinámico y contiene pocas entradas de texto. El problema al que me enfrento es que quiero que el cursor se enfoque en la primera entrada en este modal, y esto no sucede de forma predeterminada.
Así que escribí este código para hacerlo:

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

Pero ahora se enfoca en la entrada por un momento y luego desaparece automáticamente, ¿por qué sucede esto y cómo resolverlo?

@scumah tiene la respuesta para usted: Twitter bootstrap - Concéntrese en el área de texto dentro de un modal al hacer clic

Para Bootstrap 2

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

Actualización: para Bootstrap 3

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

========== Actualizar ======

En respuesta a una pregunta, puede usar esto con múltiples modales en la misma página si especifica diferentes objetivos de datos, cambie el nombre de sus ID de modales para que coincidan y actualice los ID de los campos de entrada del formulario y, finalmente, actualice su JS para que coincida con estos nuevos ID:
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();
})

Encontré la mejor manera de hacer esto, sin jQuery.

<input value="" autofocus>

funciona perfectamente.

Este es un atributo html5. Compatible con todos los principales navegadores.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

La respuesta de David Taiaroa es correcta, pero no funciona porque el tiempo para "aparecer" en el modal no le permite establecer el enfoque en la entrada. Necesitas crear un retraso:

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

})

El código habitual (a continuación) no me funciona:

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

Encontré la solución :

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

ver más aquí

Conseguí que bootstrap agregara la siguiente información en su página:

Debido a cómo HTML5 define su semántica, el atributo HTML de enfoque automático no tiene ningún efecto en los modales de Bootstrap. Para lograr el mismo efecto, use JavaScript personalizado:

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

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

Este es el código simple que funcionará mejor para usted en todas las ventanas emergentes que tengan cualquier campo de entrada con el enfoque

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

Creo que la respuesta más correcta, asumiendo el uso de jQuery, es una consolidación de aspectos de todas las respuestas en esta página, más el uso del evento que pasa Bootstrap:

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

También trabajaría cambiar $(document)a $('.modal')o para agregar una clase a la modal que las señales que deben producirse este enfoque, al igual$('.modal.focus-on-first-input')

prueba este código, podría funcionar para ti

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

El primer paso, debe establecer su autofocusatributo en la entrada del formulario.

<input name="full_name" autofocus/>

Y luego debe agregar una declaración para establecer el enfoque automático de su entrada después de que se muestre su modal.
Prueba 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();
    });
});

Si solo desea enfocar automáticamente cualquier modal que estaba abierto, puede colocar sus patrones o funciones de biblioteca en este fragmento que se enfocará en la primera entrada:

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

Si está buscando un fragmento que funcione para todos sus modales y busque automáticamente el primer texto de entrada en el abierto, debe usar esto:

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

Si su modal se carga usando ajax, use esto en su lugar:

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

esta es la solución más general

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

• funciona con modales agregados a DOM después de la carga de la página
• funciona con entrada, área de texto, seleccionar y no con botón
• omite oculto, deshabilitado, solo lectura
• funciona con modales descoloridos, sin necesidad de setInterval

Intente eliminar la propiedad tabIndex del modal , cuando su input / textbox esté abierto. Vuelva a configurarlo como antes , cuando cierre la entrada / cuadro de texto. Esto resolvería el problema independientemente de la versión de arranque y sin comprometer el flujo de experiencia del usuario .

Según los documentos de Bootstrap 4:

Debido a cómo HTML5 define su semántica, el atributo HTML de enfoque automático no tiene ningún efecto en los modales de Bootstrap. Para lograr el mismo efecto, utilice JavaScript personalizado.

P.ej:

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

Enlace .

Utilice el enfoque automático para buscar el elemento de formulario correcto:

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

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

• Es "#button" el que llama a la forma modal,

• "#mimodal" es la forma modal,

• "#myinput" es la entrada que desea enfocar