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)
gdoron mendukung Monica
sumber
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

Ikan salem muda
sumber
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>
ucdream
sumber
5

Coba ini:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
Adil Malik
sumber
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
}
Sparky alias tom
sumber
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.

Travis Heeter
sumber
1

Coba ini::

$(document).on("click",function(){
    alert(event.target);
    });
Pudugurthi Ravindar
sumber
0

Jika Anda ingin mengonfirmasi apakah fokus dengan elemen, maka 

if ($('#inputId').is(':focus')) {
    //your code
}
Sandeep Singh
sumber