$ .fokus () tidak berfungsi

Contoh terakhir darifocus() status dokumentasi jQuery

$('#id').focus()

harus membuat input terfokus (aktif). Sepertinya saya tidak bisa membuatnya bekerja.

Bahkan di konsol di situs ini, saya mencobanya untuk kotak pencarian

$('input[name="q"]').focus()

dan aku tidak mendapatkan apa-apa. Ada ide?

Sebenarnya contoh yang Anda berikan untuk fokus pada situs ini berfungsi dengan baik, selama Anda tidak fokus di konsol. Alasan yang tidak berfungsi adalah hanya karena itu tidak mencuri fokus dari konsol dev. Jika Anda menjalankan kode berikut di konsol Anda dan kemudian dengan cepat mengklik di jendela browser Anda setelahnya, Anda akan melihatnya memfokuskan kotak pencarian:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Adapun yang lainnya, satu hal yang telah membuat saya kesulitan di masa lalu adalah urutan kejadian. Anda tidak dapat memanggil fokus () pada elemen yang belum dilampirkan ke DOM. Sudahkah elemen yang Anda coba fokuskan telah melekat pada DOM?

Menemukan solusi di tempat lain di internet ...

$('#id').focus();

tidak bekerja.

$('#id').get(0).focus();

berhasil.

Beberapa jawaban di sini menyarankan setTimeoutuntuk menunda proses pemfokusan pada elemen target. Salah satunya menyebutkan bahwa target ada di dalam dialog modal. Saya tidak dapat berkomentar lebih lanjut tentang kebenaran dari setTimeoutsolusi tanpa mengetahui detail spesifik di mana ia digunakan. Namun, saya pikir saya harus memberikan jawaban di sini untuk membantu orang-orang yang mengalami thread ini sama seperti saya

Fakta sederhananya adalah bahwa Anda tidak dapat fokus pada elemen yang belum terlihat . Jika Anda mengalami masalah ini, pastikan target benar-benar terlihat saat upaya memfokuskannya. Dalam kasus saya sendiri, saya melakukan sesuatu seperti itu

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Ini tidak berhasil. Aku hanya menyadari apa yang terjadi ketika saya dieksekusi $ ( '# elementid'). Focus () `dari konsol yang melakukan pekerjaan. Perbedaannya - dalam kode saya di atas target tidak ada kepastian bahwa target akan terlihat karena animasi mungkin tidak lengkap . Dan di situlah letak petunjuknya

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

bekerja seperti yang diharapkan. Pada awalnya saya juga memberikan setTimeoutsolusi dan itu berhasil juga. Namun, batas waktu yang dipilih secara sewenang-wenang terikat untuk memecahkan solusi cepat atau lambat tergantung pada seberapa lambat perangkat host berjalan tentang proses memastikan bahwa elemen target terlihat.

jika Anda menggunakan bootstrap + modal, ini berfungsi untuk saya:

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

Untuk berjaga-jaga jika ada orang lain yang menemukan pertanyaan ini dan memiliki situasi yang sama dengan saya - saya mencoba untuk mengatur fokus setelah mengklik pada elemen lain, namun fokus tampaknya tidak berfungsi. Ternyata saya hanya butuh e.preventDefault();- inilah contohnya:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Ini membantu:

Jika Anda memanggil HTMLElement.focus () dari pengendali acara mousedown, Anda harus menghubungi event.preventDefault () untuk menjaga fokus agar tidak meninggalkan HTMLElement. Sumber: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Saya menyadari ini sudah tua, tetapi menemukan hari ini. Tidak ada jawaban yang berfungsi untuk saya, apa yang saya temukan ternyata berhasil adalah setTimeout. Saya ingin fokus saya ditempatkan pada input yang diajukan dari modal, menggunakan setTimeout bekerja. Semoga ini membantu!

Saya juga punya masalah ini. Solusi yang berhasil dalam kasus saya adalah menggunakan properti tabindex pada elemen HTML.

Saya menggunakan ng-repeatbeberapa elemen li di dalam daftar dan saya tidak dapat membawa fokus ke li pertama menggunakan .focus (), jadi saya cukup menambahkan atribut tabindex ke setiap li selama loop.

jadi sekarang <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

+1 adalah indeks yang dimulai dari 0. Pastikan juga elemen tersebut ada dalam DOM sebelum memanggil fungsi .focus ()

Saya harap ini membantu.

Bagi mereka dengan masalah tidak berfungsi karena Anda menggunakan "$ (elemen) .show ()". Saya memecahkannya dengan cara berikut:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Jadi Anda tidak perlu timer, itu akan dijalankan setelah metode pertunjukan selesai.

Tambahkan penundaan sebelum fokus (). 200 ms sudah cukup

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Punya masalah ini lagi sekarang, dan percaya atau tidak, yang harus saya lakukan adalah menutup alat pengembang. Rupanya tab Konsol memiliki prioritas fokus di atas konten halaman.

Pastikan elemen dan orang tuanya terlihat. Anda tidak dapat menggunakan fokus pada elemen tersembunyi

SOLUSI TAMBAHAN Memiliki masalah yang sama di mana fokus () tampaknya tidak berfungsi tetapi akhirnya ternyata yang diperlukan adalah menggulir ke posisi yang benar:

• https://stackoverflow.com/a/43342974/1335717

Untuk kasus saya, saya harus menentukan indeks tab ( -1jika hanya dapat fokus melalui skrip)

<div tabindex='-1'>
<!-- ... -->
</div>