Как установить фокус для определенного поля в модале 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);
  });

Попробуй это

Вот старая ДЕМО :

РЕДАКТИРОВАТЬ: (Вот рабочий DEMO с Bootstrap 3 и jQuery 1.8.3)

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

Для запуска начальной загрузки 3 необходимо использовать событие selected.bs.modal:

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

Просто хотел сказать, что 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У меня была такая же проблема с начальной загрузкой 3, и я решил так:

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

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

Bootstrap добавил загруженное событие.

https://getbootstrap.com/docs/3.3/javascript/#modals

захватить событие «loaded.bs.modal »на модальном

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

Bootstrap модальное шоу событие

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

})

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

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

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