Cara Mengatur Fokus pada Input Field menggunakan JQuery

106

Diberikan struktur HTML berikut:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

yang akan diulang beberapa kali pada halaman, bagaimana cara mengatur fokus pada bidang input di .bottomdiv saat pengguna mengklik link di .topdiv?

Saat ini saya membuat .bottomdiv muncul dengan sukses saat diklik menggunakan kode JQuery di bawah ini, tetapi tampaknya tidak dapat menemukan cara mengatur fokus pada bidang input pada saat yang sama.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

Terima kasih!

jquery html

— batu bergulir
sumber

Pertanyaan Anda telah dijawab, tetapi juga: Saya menganggap Anda juga mengeksekusi return false;di akhir acara callback? Atau function(e) { e.preventDefault(); ..... }? Jika tidak, browser Anda hanya akan menavigasi ke halaman itu setelah menjalankan callback.

— simshaun

@simshaun buka halaman mana?

— batu bergulir

Nah, dalam contoh Anda ketika Anda mengklik tautan itu, itu akan menuju ke example.com .

— simshaun

oh, benar, terima kasih atas perhatiannya!

— batu bergulir

Jawaban:

135

Coba ini, untuk mengatur fokus ke kolom input pertama:

$(this).parent().siblings('div.bottom').find("input.post").focus();

— Justin Ethier
sumber

Spasi antara input& :first. Apakah jQuery menyambungkannya secara otomatis? Saya selalu berpikir seharusnya begitu input:first.

— simshaun

Ya, Anda bisa menulisnya dengan cara apa pun. Saya kira input:firstmungkin cara yang lebih formal untuk menulisnya, meskipun tampaknya lebih mudah untuk dibaca dengan cara lain. Tapi mungkin itu hanya saya :)

— Justin Ethier

Saya rasa karena saya sudah terbiasa dengannya, ketika saya melihat ruang, saya secara otomatis berpikir "elemen anak" dan perlu beberapa saat untuk menghilangkan kebingungan diri saya. Tapi hei, itu hanya aku. Itu keren bahwa itu bekerja dengan cara apa pun.

— simshaun

@ justin saya sebenarnya harus sedikit men-tweaknya untuk membuatnya berfungsi: $(this).parent().siblings('div.bottom').find("input.post").focus();tetapi .find()adalah pemilih yang saya cari. Menariknya input :firstjuga tidak input:firstberhasil.

— batu bergulir

Menarik, mungkin karena inputnya ada di dalam formtag. Bagaimanapun, senang Anda melakukannya untuk bekerja!

— Justin Ethier

Jika masukan kebetulan berada dalam dialog modal bootstrap, jawabannya berbeda. Menyalin dari Cara Mengatur fokus ke input teks pertama dalam modal bootstrap setelah ditampilkan, inilah yang diperlukan:

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

— Kevin Buchs
sumber

Jawaban Justin tidak berhasil untuk saya (Chromium 18, Firefox 43.0.1). jQuery .focus()membuat sorotan visual, tetapi kursor teks tidak muncul di lapangan (jquery 3.1.0).

Terinspirasi oleh https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , saya menambahkan atribut autofocus ke bidang input dan voila!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}

— MKaama
sumber

Bekerja untuk saya. Versi yang lebih sederhana adalah seperti ini: $ ('. Class input'). Focus (); $ ('. class input'). prop ('autofocus');

— raison