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

Question

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

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

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

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

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

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

Answer 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()
})

Answer 4

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

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

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

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

Answer 5

Принятые ответы обрабатывают фокусировку на кнопке автофокуса в модальном окне, но не восстанавливают фокус на главной странице впоследствии. Это может быть нежелательно, если вы показываете модальное окно из формы, которую пользователь ожидает отправить после нажатия клавиши Enter.

Итак, вот полный код, который обрабатывает как отображение, так и скрытие модального окна:

// All modals will take enter to mean clicking the button with the autofocus property
$(document).ready(function () {
    $('.modal').on('shown.bs.modal', function() {
        $(this).find('[autofocus]').focus();
    });
    $('.modal').on('show.bs.modal', function(e) {
        var activeElement = document.activeElement;
        $(this).on('hidden.bs.modal', function () {
            activeElement.focus();
            $(this).off('hidden.bs.modal');    
        });
    });
});

Примечание. Этот код очищает все прослушиватели событий модального окна. hidden.bs.modalсобытие. Если у вас есть другие прослушиватели для этого события, вам необходимо превратить скрытую функцию в именованную функцию, на которую вы можете ссылаться и удалять по ссылке из прослушивателей событий.

Answer 6

У вас есть вход с 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();
});