Вход автофокуса в твиттер-бутстрап модальный

У меня такая проблема - мне нужно автофокусировать некоторый элемент внутри твиттера bootstrap modal (после его отображения). Здесь сложная часть - содержимое этого модаля загружается с использованием "data-remote" (метод jQuery.load) из отдельного HTML файла, поэтому

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

работает только в том случае, если модаль был загружен раньше.
Вопрос в том, как сделать автофокусом в первую очередь модальные нагрузки?

Ответ 1

Я использую Bootstrap 3.0 (надеюсь, это работает и с 3.1).

Нам пришлось использовать tabindex="-1", потому что это позволяет клавише ESC закрывать модальный.

Итак, я смог исправить эту проблему, используя:

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

Ответ 2

попробуйте удалить tabindex = "- 1", и он отлично работает.

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

Надеюсь, это поможет!

Ответ 3

Я не мог получить решение @nc, работающее в моем приложении. Он не видел модалов, которые были добавлены позже. Это работало для меня, хотя

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

Как указывает Фрэнк Фанг, вы должны использовать это, если используете более новую версию Bootstrap, которая не полагается на атрибут autofocus HTML.

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

Ответ 4

Выше ответы несколько устарели для последних версий Bootstrap.

Ниже выдержки из: http://getbootstrap.com/javascript/#modals

Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не влияет на модальность Bootstrap. Чтобы добиться такого же эффекта, используйте некоторые пользовательские JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Ответ 5

У вас есть вход с атрибутом autofocus, который вы хотите сфокусировать, когда отображается мода загрузочного мода.

Доступна ли ваша модальная разметка при загрузке JavaScript?

Зарегистрировать обработчик событий для всех элементов .modal для события shown.bs.modal

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

Создана ли ваша модальная разметка динамически?

Зарегистрируйте обработчик событий всего документа для события shown.bs.modal.

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