JQuery ile odaklanmış eleman nasıl elde edilir?

JQuery kullanarak, caret (imlecin) odağı olan giriş öğesini nasıl alabilirim?

Başka bir deyişle, bir girdinin kulaklığın odak noktası olup olmadığı nasıl belirlenir?

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

Hangisini kullanmalısın? jQuery dokümanlarından alıntı yapmak :

Diğer sözde sınıf seçicilerinde olduğu gibi (":" ile başlayanlar) öncesinde şunlar önerilir: bir etiket adı veya başka bir seçiciyle odaklanma; aksi takdirde, evrensel seçici ("*") ima edilir. Başka bir deyişle, çıplak buna $(':focus')eşdeğerdir $('*:focus'). Şu anda odaklanmış öğeyi arıyorsanız, $ (document.activeElement) tüm DOM ağacını aramak zorunda kalmadan öğeyi alır.

Cevap:

document.activeElement

Ve öğeyi saran bir jQuery nesnesi istiyorsanız:

$(document.activeElement)

$( document.activeElement )

JQuery belgelerinde önerildiği gibi tüm DOM ağacını aramak zorunda kalmadan alır

Firefox, Chrome, IE9 ve Safari'de iki yol test ettim.

(1). $(document.activeElement)Firefox, Chrome ve Safari'de beklendiği gibi çalışır.

(2). $(':focus')Firefox ve Safari'de beklendiği gibi çalışır.

'İsim' girmek için fareye girdim ve klavyede Enter tuşuna bastım, sonra odaklanılan öğeyi almaya çalıştım.

(1). $(document.activeElement)Firefox, Chrome ve Safari'de beklendiği gibi input: text: name döndürür, ancak IE9'da input: Submit: addPassword değerini döndürür

(2). $(':focus')giriş: metin: Firefox ve Safari'de beklendiği gibi bir ad döndürür, ancak IE'de hiçbir şey

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

Bunu dene:

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

Kimseden nasıl bahsedilmedi ..

document.activeElement.id

IE8 kullanıyorum ve başka bir tarayıcıda test etmedim. Benim durumumda, bir alanın en az 4 karakter olduğundan ve harekete geçmeden önce odaklandığından emin olmak için kullanıyorum. 4. numarayı girdikten sonra tetiklenir. Alanın 'yıl' kimliği vardır. Ben kullanıyorum..

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

$(':focus')[0] size asıl öğeyi verecektir.

$(':focus') size bir dizi öğe verir, genellikle bir kerede yalnızca bir öğe odaklanır, bu nedenle yalnızca bir şekilde birden fazla öğeye odaklanmışsanız daha iyi olur.

Bunu dene::

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

Odağın bir öğeyle olup olmadığını onaylamak istiyorsanız

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