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

Але це було безрезультатно. Нарешті, я спробував прив’язатись до події "шоу", але навіть так, вхід не зосередиться. Нарешті, лише для тестування, оскільки у мене виникло подозрення, це стосується порядку завантаження js, я поставив setTimeout лише для того, щоб побачити, чи затримаю я на секунду, чи буде фокусування, і так, це працює! Але цей метод, очевидно, лайно. Чи може бути такий ефект, як нижче, не використовуючи setTimeout?

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

Спробуйте це

Ось стара 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();
})

Просто хотів сказати, що 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" .. І це моє рішення, яке ідеально працює ..

Замість простого на ():

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

Використовувати на () з делегованим елементом:

$('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

захоплення події 'load.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();
    });  
});

Сподіваюся, що це допомагає ..