Как установить фокус для определенного поля в модуле Bootstrap, как только он появится

Я видел пару вопросов в отношении загрузочных модалов, но ничего подобного не было, поэтому я продолжу.

У меня есть модальный, который я вызываю onclick так...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

Это отлично работает, но когда я показываю модальный, я хочу сосредоточиться на первом элементе ввода... В этом случае первый элемент ввода имеет идентификатор #photo_name.

Итак, я попробовал

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

Но это было бесполезно. Наконец, я попытался привязать к событию 'show', но даже в этом случае вход не будет сфокусирован. Наконец, просто для тестирования, поскольку у меня было подозрение, что это касается порядка загрузки js, я поставил setTimeout только для того, чтобы увидеть, задержу ли я секунду, будет ли работать фокус, и да, это работает! Но этот метод, очевидно, дерьмо. Есть ли способ получить тот же эффект, что и ниже, без использования setTimeout?

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

Ответы

Ответ 1

Попробуйте это

Вот старый DEMO:

EDIT: (Вот рабочий DEMO с Bootstrap 3 и jQuery 1.8.3)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

Запуск бутстрапа 3 необходимо использовать событие show.bs.modal:

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})

Ответ 2

Просто хотел сказать, что Bootstrap 3 обрабатывает это немного по-другому. Имя события "показано .bs.modal".

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

или сосредоточьтесь на первом видимом входе следующим образом:

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

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

Ответ 3

Я использую это в своем макете для захвата всех модалов и фокусировки на первом входе

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

Ответ 4

У меня была такая же проблема с bootstrap 3, фокус, когда я нажимаю ссылку, но не когда запускает событие с javascript. Решение:

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

Наверное, это что-то в анимации!

Ответ 5

У меня возникла проблема, чтобы поймать событие "show.bs.modal". И это мое решение, которое отлично работает.

Вместо простого on():

$('#modal').on 'shown.bs.modal', ->

Использовать on() с делегированным элементом:

$('body').on 'shown.bs.modal', '#modal', ->

Ответ 6

Похоже, потому, что модальная анимация включена (fade в классе диалога), после вызова .modal('show') диалоговое окно не видно сразу, поэтому в это время он не может получить фокус.

Я могу подумать о двух способах решения этой проблемы:

  • Удалите fade из класса, поэтому диалоговое окно сразу видно после вызова .modal('show'). Вы можете увидеть http://codebins.com/bin/4ldqp7x/4 для демонстрации. (Извините @keyur, я ошибочно отредактировал и сохранил как новую версию вашего примера)
  • Вызвать focus() в shown событие, как писал @keyur.

Ответ 7

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

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

Вам просто нужно вызвать modalEvents() на готовом документе.

Использование:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

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

Ответ 8

У меня была такая же проблема с бутстрапом 3 и решена так:

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

Ответ 9

Немного более чистое и модульное решение может быть:

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

Или используя вместо этого свой идентификатор:

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

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