it-swarm.com.ru

Ввод автофокуса в модале начальной загрузки Twitter

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

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

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

46
Shtirlits

Я использую 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();
});
92
nc.

попробуйте удалить 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">

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

25
nooweel

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

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

Как отмечает Фрэнк Фанг, вы должны использовать это, если вы используете более новую версию Bootstrap, которая не использует HTML-атрибут 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()
})
14
Paul Oliver

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

Ниже приводится выдержка из: http://getbootstrap.com/javascript/#modals

Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не имеет эффекта в модальности Bootstrap. Для достижения того же эффекта используйте немного пользовательского JavaScript:

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

У вас есть вход с атрибутом 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();
});
0
Aaron Hudon