Cara mengatur fokus untuk bidang tertentu dalam modal Bootstrap, setelah muncul

Saya telah melihat beberapa pertanyaan terkait dengan bootstrap modals, tetapi tidak ada yang persis seperti ini, jadi saya akan melanjutkan.

Saya memiliki modal yang saya sebut onclick seperti ...

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

Ini berfungsi dengan baik, tetapi ketika saya menunjukkan modal saya ingin fokus pada elemen input pertama ... Mungkin elemen input pertama memiliki id #photo_name.

Jadi saya mencoba

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

Tetapi ini tidak berhasil. Terakhir, saya mencoba mengikat ke acara 'show' tetapi meskipun begitu, input tidak akan fokus. Terakhir hanya untuk pengujian, karena saya curiga ini adalah tentang urutan pemuatan js, saya memasukkan setTimeout hanya untuk melihat apakah saya menunda sebentar, apakah fokus akan bekerja, dan ya, itu berhasil! Tetapi metode ini jelas omong kosong. Apakah ada cara untuk memiliki efek yang sama seperti di bawah ini tanpa menggunakan setTimeout?

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

Coba ini

Ini DEMO lama :

EDIT: (Ini DEMO yang berfungsi dengan Bootstrap 3 dan jQuery 1.8.3)

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

Memulai bootstrap 3 perlu menggunakan even.bs.modal:

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

Hanya ingin mengatakan bahwa Bootstrap 3 menangani ini sedikit berbeda. Nama acara "ditampilkan.bs.modal".

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

atau letakkan fokus pada input pertama yang terlihat seperti ini:

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

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

Saya menggunakan ini di tata letak saya untuk menangkap semua modals dan fokus pada input pertama

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

Saya punya masalah yang sama dengan bootstrap 3, fokus ketika saya mengklik tautan, tetapi tidak ketika memicu acara dengan javascript. Solusinya:

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

Mungkin ini tentang animasi!

Saya punya masalah untuk menangkap acara "ditampilkan.bs.modal" .. Dan ini solusi saya yang berfungsi sempurna ..

Alih-alih sederhana di ():

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

Gunakan pada () dengan elemen yang didelegasikan:

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

Sepertinya itu karena modal animasi diaktifkan ( fadedi kelas dialog), setelah memanggil.modal('show') , dialog tidak segera terlihat, sehingga tidak bisa mendapatkan fokus saat ini.

Saya dapat memikirkan dua cara untuk mengatasi masalah ini:

1. Hapus fadedari kelas, sehingga dialog langsung terlihat setelah menelepon .modal('show'). Anda dapat melihat http://codebins.com/bin/4ldqp7x/4 untuk demo. (Maaf @keyur, saya salah mengedit dan menyimpan versi baru dari contoh Anda)
2. Panggilan focus()di shownacara seperti apa yang @keyur menulis.

Saya telah menciptakan cara dinamis untuk memanggil setiap acara secara otomatis. Ini sempurna untuk memfokuskan bidang, karena memanggil acara sekali saja, menghapusnya setelah digunakan.

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

Anda hanya perlu memanggil modalEvents()dokumen siap.

Menggunakan:

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

Jadi, Anda dapat menggunakan modal yang sama untuk memuat apa yang Anda inginkan tanpa khawatir tentang menghapus acara setiap saat.

Saya memiliki masalah yang sama dengan bootstrap 3 dan dipecahkan seperti ini:

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

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

Bootstrap telah menambahkan acara yang dimuat.

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

tangkap acara 'loaded.bs.modal' di ibukota

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

Bootstrap acara modal acara

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

})

Solusi yang lebih bersih dan lebih modular mungkin:

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

Atau gunakan ID Anda sebagai contoh:

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

Semoga itu bisa membantu ..