Bagaimana cara mendapatkan elemen fokus dengan jQuery?


Jawaban:


740
// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

Yang mana yang harus Anda gunakan? mengutip dokumen jQuery :

Seperti penyeleksi pseudo-kelas lainnya (yang dimulai dengan ":"), disarankan untuk mengawali: fokus dengan nama tag atau pemilih lain; jika tidak, pemilih universal ("*") tersirat. Dengan kata lain, telanjang $(':focus')itu setara dengan $('*:focus'). Jika Anda mencari elemen yang saat ini difokuskan, $ (document.activeElement) akan mengambilnya tanpa harus mencari seluruh pohon DOM.

Jawabannya adalah:

document.activeElement

Dan jika Anda ingin objek jQuery membungkus elemen:

$(document.activeElement)

2
tapi tunggu, bagaimana cara mendapatkan elemen yang memiliki tanda sisipan?
dave

@dave. Apa maksudmu "memiliki tanda sisipan" ? fokus? mouse ada di sana?
gdoron mendukung Monica

baik di sini adalah situasi saya: ketika saya mengklik elemen tertentu, saya ingin menempatkan karakter dalam elemen teks input fokus terakhir. Pada dasarnya elemen yang memiliki fokus terakhir atau tepat sebelum mengklik elemen tertentu.
dave

1
@dave. Itu tidak bisa dilakukan. Saya pikir hanya IE yang memiliki fitur ini, tetapi sekarang Anda mengajukan pertanyaan berbeda, Anda harus melakukannya dalam pertanyaan baru.
gdoron mendukung Monica

3
Saya suka bagaimana Anda menggunakan nama variabel $ awalan $focused,, karena saya menganggap Anda melakukan itu untuk menyatakan var adalah objek jquery. TYVM.
Valamas

36
$( document.activeElement )

Akan mengambilnya tanpa harus mencari seluruh pohon DOM seperti yang direkomendasikan pada dokumentasi jQuery


1
bagaimana cara mendapatkan elemen yang memiliki tanda sisipan?
dave

6

Saya telah menguji dua cara di Firefox, Chrome, IE9 dan Safari.

(1) $(document.activeElement)berfungsi seperti yang diharapkan di Firefox, Chrome dan Safari.

(2) $(':focus')berfungsi seperti yang diharapkan di Firefox dan Safari.

Saya pindah ke mouse untuk memasukkan 'nama' dan menekan Enter pada keyboard, lalu saya mencoba untuk mendapatkan elemen fokus.

(1) $(document.activeElement)mengembalikan input: teks: nama seperti yang diharapkan di Firefox, Chrome dan Safari, tetapi mengembalikan input: kirim: addPassword di IE9

(2) $(':focus')mengembalikan input: teks: nama seperti yang diharapkan di Firefox dan Safari, tetapi tidak ada di IE

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>

5

Coba ini:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

Ya, itu sebabnya loop ini hanya memiliki satu iterasi. waspada hanya untuk menunjukkan contoh. Jika Anda memiliki variabel ini, Anda bisa melakukan semuanya dengan elemen yang Anda inginkan.
Adil Malik

Bagaimana mungkin memfokuskan lebih dari satu elemen?
Andreas Furster

@ AndreasFurster kamu benar. Akan selalu ada hanya satu iterasi dalam loop ini. Ini mungkin bukan cara terbaik untuk mencapai tujuan, tetapi berhasil.
Adil Malik

Lihat jawaban yang diterima untuk mempelajari mengapa ini adalah cara terburuk / paling efisien untuk melakukannya. (tidak perlu .eachbertahan)
Brad Kent

2

Bagaimana tidak ada yang disebutkan ..

document.activeElement.id

Saya menggunakan IE8, dan belum mengujinya di browser lain. Dalam kasus saya, saya menggunakannya untuk memastikan bidang minimal 4 karakter dan fokus sebelum bertindak. Setelah Anda memasukkan nomor 4, itu memicu. Bidang ini memiliki id 'tahun'. Saya menggunakan..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

1

$(':focus')[0] akan memberi Anda elemen yang sebenarnya.

$(':focus') akan memberi Anda array elemen, biasanya hanya satu elemen yang difokuskan pada satu waktu sehingga ini hanya lebih baik jika Anda entah bagaimana memiliki beberapa elemen yang difokuskan.



0

Jika Anda ingin mengonfirmasi apakah fokus dengan elemen, maka

if ($('#inputId').is(':focus')) {
    //your code
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.