Gösterildikten sonra bir önyükleme modelinde ilk metin girişine odak nasıl ayarlanır

Dinamik bir önyükleme modeli yüklüyorum ve birkaç metin girişi içeriyor. Karşılaştığım sorun, imlecin bu modaldaki ilk girdiye odaklanmasını istemem ve bu varsayılan olarak gerçekleşmiyor.
Ben de bunu yapmak için bu kodu yazdım:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

Ama şimdi bir an için girdiye odaklanıyor ve sonra otomatik olarak uzaklaşıyor, bu neden oluyor ve nasıl çözülür?

@scumah sizin için cevabı buluyor: Twitter bootstrap - Tıklandığında bir modal içindeki metin alanına odaklanın

Bootstrap 2 için

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

Güncelleme: Bootstrap 3 için

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

========== Güncelle ======

Bir soruya yanıt olarak, farklı veri hedefleri belirlerseniz, modal kimliklerinizi form giriş alanlarının kimlikleriyle eşleşecek ve güncelleyecek şekilde yeniden adlandırırsanız ve son olarak JS'nizi bu yenilerle eşleşecek şekilde güncellerseniz aynı sayfada birden çok modda kullanabilirsiniz. Kimlikler:
bkz. Http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

Bunu jQuery olmadan yapmanın en iyi yolunu buldum.

<input value="" autofocus>

Mükemmel çalışıyor.

Bu bir html5 özelliğidir. Tüm büyük tarayıcılar tarafından desteklenir.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

David Taiaroa'nın cevabı doğru, ancak işe yaramıyor çünkü modal "geçme" zamanı girdiye odaklanmanıza izin vermiyor. Bir gecikme yaratmanız gerekiyor:

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

})

Normal kod (aşağıda) benim için çalışmıyor :

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Çözümü buldum :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

burada daha fazlasını görün

Bu bootstrap'in sayfalarına aşağıdaki bilgileri ekledim:

HTML5'in anlambilimini nasıl tanımladığından dolayı, otomatik odaklama HTML niteliğinin Bootstrap modlarında hiçbir etkisi yoktur. Aynı etkiyi elde etmek için bazı özel JavaScript kullanın:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

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

Bu, odaklanan herhangi bir giriş alanına sahip tüm açılır pencerelerde sizin için en iyi şekilde çalışacak basit koddur.

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

Bence en doğru cevap, jQuery kullanımını varsayarsak, bu sayfadaki tüm cevapların yönlerinin birleştirilmesi ve ayrıca Bootstrap'in geçtiği olayın kullanımıdır:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

Ayrıca , modala bu odaklanmanın gerçekleşmesi gerektiğini gösteren bir sınıf eklemek veya değiştirmek $(document)için de çalışacaktır.$('.modal')$('.modal.focus-on-first-input')

bu kodu deneyin, sizin için çalışabilir

$(this).find('input:text')[0].focus();

İlk adım, autofocusözniteliğinizi form girişinde ayarlamanız gerekir .

<input name="full_name" autofocus/>

Ve sonra, modal gösterildikten sonra girişinizin otomatik odaklamasını ayarlamak için bildirim eklemeniz gerekir.
Bu kodu deneyin:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

Açık olan herhangi bir kipi otomatik odaklamak istiyorsanız, ilk girdiye odaklanacak olan bu pasajı size kalıplar veya lib işlevleri koyabilirsiniz:

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

Tüm kipleriniz için işe yarayacak bir pasaj arıyorsanız ve açılmış olanın 1. giriş metnini otomatik olarak arıyorsanız, şunu kullanmalısınız:

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

Modaliniz ajax kullanılarak yüklenmişse, bunun yerine şunu kullanın:

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

bu en genel çözüm

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• Sayfa yüklendikten sonra DOM'a eklenen modlarla çalışır
• giriş, metin alanı, seç ve düğmeyle çalışır
• ommits gizli, devre dışı, salt okunur
• soluk modlarla çalışır, setInterval'e gerek yoktur

Giriş / metin kutunuz açıkken kipin tabIndex özelliğini kaldırmayı deneyin . Giriş / metin kutusunu kapattığınızda olduğu gibi geri ayarlayın . Bu sorun çözeceği konusundaki bakılmaksızın önyükleme sürümü ve kullanıcı deneyimi akışını ödün vermeden .

Bootstrap 4 belgelerine göre:

HTML5'in anlambilimini nasıl tanımladığından dolayı, otomatik odaklama HTML niteliğinin Bootstrap modlarında hiçbir etkisi yoktur. Aynı etkiyi elde etmek için bazı özel JavaScript kullanın.

Örneğin:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

Bağlantı .

Doğru form öğesini aramak için otomatik odaklamayı kullanın:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• Modal formu çağıran "#button" dır,

• "#mymodal" modal biçimdir,

• Odaklanmak istediğiniz girdi "# myinput"