Bir kez göründüğünde, Bootstrap modundaki belirli bir alan için odağı ayarlama

Bootstrap modals ile ilgili birkaç soru gördüm, ama hiçbiri tam olarak böyle değil, bu yüzden devam edeceğim.

Dediğim bir modal var.

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

Bu iyi çalışıyor, ancak mod gösterildiğinde ilk giriş öğesine odaklanmak istiyorum ... Bu durumda ilk giriş öğesinin #photo_name kimliği vardır.

Ben de denedim

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

Ama bu işe yaramadı. Son olarak, 'show' olayına bağlanmayı denedim, ancak buna rağmen, giriş odaklanmayacak. Son olarak sadece test için, bu js yükleme sırası ile ilgili bir şüphe vardı, ben sadece bir saniye gecikme olup olmadığını görmek için bir setTimeout koymak, odak işe yarayacak ve evet, işe yarıyor! Ancak bu yöntem açıktır. SetTimeout kullanmadan aşağıdaki ile aynı etkiye sahip olmanın bir yolu var mı?

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

Bunu dene

İşte eski DEMO :

EDIT: (İşte Bootstrap 3 ve jQuery 1.8.3 ile çalışan bir DEMO )

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

Bootstrap 3'ü başlatmak için shown.bs.modal olayını kullanmanız gerekir:

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

Sadece Bootstrap 3'ün bunu biraz farklı ele aldığını söylemek istedim. Etkinlik adı "shown.bs.modal" şeklindedir.

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

veya odağı şöyle görünür olan ilk girişe koyun:

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

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

Bunu tüm modaları yakalamak ve ilk girdiye odaklanmak için mizanpajımda kullanıyorum

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

Bootstrap 3 ile aynı sorunu vardı, bağlantıyı tıkladığınızda odaklanıyorum, ancak javascript ile olayı tetiklediğimde değil. Çözüm:

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

Muhtemelen animasyonla ilgili bir şey!

"Shown.bs.modal" etkinliğini yakalamakta sorun yaşadım .. Ve bu benim çözümüm mükemmel çalışan ..

Bunun yerine basit ():

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

Yetki verilen öğeyle () kullan:

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

Aramadan sonra modsal animasyonun etkinleştirildiği ( fadeiletişim kutusunun sınıfında) olduğu anlaşılıyor.modal('show') iletişim kutusu hemen görünmez, bu yüzden şu anda odaklanamıyor.

Bu sorunu çözmenin iki yolunu düşünebilirim:

1. Kaldır fadeiletişim çağırarak hemen sonra görünür olması için, sınıf .modal('show'). Demo için http://codebins.com/bin/4ldqp7x/4 adresini görebilirsiniz . (Üzgünüm @keyur, yanlışlıkla örneğinizin yeni sürümü olarak düzenledim ve kaydettim)
2. Çağrı focus()içinde shown@keyur yazdıklarını gibi olay.

Her etkinliği otomatik olarak çağırmak için dinamik bir yol oluşturdum. Bir alanı odaklamak mükemmeldir, çünkü etkinliği bir kez çağırır ve kullanımdan sonra kaldırır.

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

Sadece modalEvents()belge hazır aramak gerekir .

kullanın:

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

Böylece, olayları her seferinde kaldırma konusunda endişelenmeden yüklemek için aynı modal'ı kullanabilirsiniz.

Bootstrap 3 ile aynı sorunu vardı ve böyle çözüldü:

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

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

Bootstrap yüklenmiş bir etkinlik ekledi.

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

moddaki 'loaded.bs.modal' olayını yakala

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

Bootstrap kalıcı gösteri etkinliği

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

})

Biraz daha temiz ve daha modüler bir çözüm olabilir:

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

Veya bunun yerine kimliğinizi örnek olarak kullanmak için:

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

Umarım yardımcı olur..