Bagaimana cara mendapatkan elemen fokus dengan jQuery?

Menggunakan jQuery, bagaimana saya bisa mendapatkan elemen input yang memiliki fokus kursor (kursor)?

Atau dengan kata lain, bagaimana menentukan apakah suatu input memiliki fokus tanda sisipan?

// 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)

$( document.activeElement )

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

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>

Coba ini:

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

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
}

$(':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.

Coba ini::

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

Jika Anda ingin mengonfirmasi apakah fokus dengan elemen, maka

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