jquery - problem - Entrada de autoenfoque en twitter arranque modal

select2 search box not working in modal

Question

Tengo ese problema: necesito autoenfocar algún elemento dentro de Twitter bootstrap modal (después de que se muestre). La parte complicada está aquí: el contenido de este modal se carga utilizando ''data-remote'' (método jQuery.load) desde un archivo HTML separado, por lo que

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

funciona solo si modal se cargó antes.
La pregunta es: ¿cómo hacer que el enfoque automático funcione en la primera carga modal?

Answer 1

Las respuestas anteriores están algo desactualizadas para las últimas versiones de Bootstrap.

A continuación se muestra un extracto de: http://getbootstrap.com/javascript/#modals

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

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

Answer 2

Estoy usando Bootstrap 3.0 (con suerte, esto también funciona con 3.1).

Tuvimos que usar tabindex="-1" porque eso permite que la tecla ESC cierre el modal.

Así que pude solucionar este problema usando:

// Every time a modal is shown, if it has an autofocus element, focus on it.
$(''.modal'').on(''shown.bs.modal'', function() {
  $(this).find(''[autofocus]'').focus();
});

Answer 3

No pude hacer funcionar la solución de @nc en mi aplicación. No vio modales que se agregaron más tarde. Esto funcionó para mí, aunque

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

Como señala Frank Fang, debe usar esto si está usando una versión más nueva de Bootstrap que no dependa del atributo HTML de autofocus .

$(''#myModal'').on(''shown.bs.modal'', function () {
  // get the locator for an input in your modal. Here I''m focusing on
  // the element with the id of myInput
  $(''#myInput'').focus()
})

Answer 4

Tiene una entrada con el atributo de autofocus que desea enfocar cuando se muestra el modo de arranque.

¿Está disponible su marcado modal cuando se carga JavaScript?

Registre un controlador de eventos en todos los elementos .modal para el evento shown.bs.modal

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

¿Su marcado modal se genera dinámicamente?

Registre un controlador de eventos en todo el documento para el evento shown.bs.modal .

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

Answer 5

intente eliminar tabindex = "- 1" y funciona bien.

<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

¡Espero que esto ayude!