Cara Menetapkan fokus ke input teks pertama dalam modal bootstrap setelah ditampilkan

Saya memuat modal bootstrap dinamis dan berisi beberapa input teks. Masalah yang saya hadapi adalah saya ingin kursor fokus pada masukan pertama dalam modal ini, dan ini tidak terjadi secara default.
Jadi saya menulis kode ini untuk melakukannya:

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

Tapi sekarang fokus pada masukan sejenak kemudian hilang secara otomatis, mengapa ini terjadi dan bagaimana mengatasinya?

@scumah memiliki jawaban untuk Anda: Twitter bootstrap - Fokus pada textarea di dalam modal on click

Untuk Bootstrap 2

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

Pembaruan: Untuk Bootstrap 3

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

========== Perbarui ======

Menanggapi pertanyaan, Anda dapat menggunakan ini dengan beberapa modals pada halaman yang sama jika Anda menentukan target data yang berbeda, mengganti nama ID modals Anda untuk mencocokkan dan memperbarui ID dari field input form, dan terakhir memperbarui JS Anda agar sesuai dengan yang baru ini. ID:
lihat 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();
})

Saya menemukan cara terbaik untuk melakukan ini, tanpa jQuery.

<input value="" autofocus>

bekerja dengan sempurna.

Ini adalah atribut html5. Didukung oleh semua browser utama.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Jawaban David Taiaroa benar, tetapi tidak berhasil karena waktu untuk "menghilang" dalam modal tidak memungkinkan Anda menetapkan fokus pada masukan. Anda perlu membuat penundaan:

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

})

Kode biasa (di bawah) tidak berfungsi untuk saya:

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

Saya menemukan solusinya :

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

lihat lebih lanjut di sini

Saya mendapat bootstrap itu menambahkan info berikut di halaman mereka:

Karena cara HTML5 mendefinisikan semantiknya, atribut HTML fokus otomatis tidak berpengaruh dalam mode Bootstrap. Untuk mendapatkan efek yang sama, gunakan beberapa JavaScript khusus:

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

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

Ini adalah kode sederhana yang akan bekerja paling baik untuk Anda pada semua popup yang memiliki kolom input dengan memfokuskannya

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

Menurut saya jawaban yang paling benar, dengan asumsi penggunaan jQuery, adalah konsolidasi aspek dari semua jawaban di halaman ini, ditambah penggunaan acara yang dilewati Bootstrap:

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

Ini juga akan bekerja mengubah $(document)ke $('.modal')atau menambahkan kelas ke modal yang menandakan bahwa fokus ini harus terjadi, seperti$('.modal.focus-on-first-input')

coba kode ini, mungkin berhasil untuk Anda

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

Langkah pertama, Anda harus mengatur autofocusatribut Anda pada input formulir.

<input name="full_name" autofocus/>

Dan kemudian Anda harus menambahkan deklarasi untuk mengatur fokus otomatis input Anda setelah modal Anda ditampilkan.
Coba kode ini:

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

Jika Anda hanya ingin memfokuskan otomatis modal apa pun yang terbuka, Anda dapat memasukkan pola atau fungsi lib cuplikan ini yang akan fokus pada masukan pertama:

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

jika Anda mencari potongan yang akan bekerja untuk semua modals Anda, dan secara otomatis mencari teks masukan pertama di yang terbuka, Anda harus menggunakan ini:

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

Jika modal Anda dimuat menggunakan ajax, gunakan ini sebagai gantinya:

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

ini adalah solusi paling umum

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

• berfungsi dengan modal yang ditambahkan ke DOM setelah pemuatan halaman
• bekerja dengan input, textarea, pilih dan bukan dengan tombol
• ommits tersembunyi, nonaktif, hanya baca
• bekerja dengan modals pudar, tidak perlu setInterval

Cobalah untuk menghapus properti tabIndex dari modal , ketika input / textbox Anda terbuka. Setel kembali ke sebelumnya , saat Anda menutup input / kotak teks. Ini akan menyelesaikan masalah terlepas dari versi bootstrap , dan tanpa mengorbankan alur pengalaman pengguna .

Menurut Bootstrap 4 dokumen:

Karena cara HTML5 mendefinisikan semantiknya, atribut HTML fokus otomatis tidak berpengaruh dalam mode Bootstrap. Untuk mendapatkan efek yang sama, gunakan beberapa JavaScript khusus.

Misalnya:

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

Tautan .

Gunakan fokus otomatis untuk mencari elemen formulir yang tepat:

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

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

• Ini adalah "#button" yang memanggil bentuk modal,

• "#mymodal" adalah bentuk modal,

• "#myinput" adalah masukan yang ingin Anda fokuskan