Jak uzyskać element skupiony za pomocą jQuery?

Używając jQuery, w jaki sposób mogę uzyskać element wejściowy, który ma fokus kursora (kursora)?

Lub innymi słowy, jak ustalić, czy dane wejście koncentruje się na karetce?

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

Którego powinieneś użyć? cytując dokumenty jQuery :

Podobnie jak w przypadku innych selektorów pseudoklasowych (tych, które zaczynają się od „:”), zaleca się poprzedzić: focus nazwą tagu lub innym selektorem; w przeciwnym razie domyślny jest selektor uniwersalny („*”). Innymi słowy, goły $(':focus')odpowiednik $('*:focus'). Jeśli szukasz aktualnie skupionego elementu, $ (document.activeElement) pobierze go bez konieczności przeszukiwania całego drzewa DOM.

Odpowiedź to:

document.activeElement

A jeśli chcesz, aby obiekt jQuery zawinął ten element:

$(document.activeElement)

$( document.activeElement )

Odzyska je bez konieczności przeszukiwania całego drzewa DOM zgodnie z zaleceniami w dokumentacji jQuery

Testowałem dwa sposoby w Firefox, Chrome, IE9 i Safari.

(1). $(document.activeElement)działa zgodnie z oczekiwaniami w Firefox, Chrome i Safari.

(2). $(':focus')działa zgodnie z oczekiwaniami w Firefox i Safari.

Przesunąłem się do myszy, aby wpisać „nazwa”, i nacisnąłem Enter na klawiaturze, a następnie próbowałem uzyskać element skupiony.

(1). $(document.activeElement)zwraca input: text: name zgodnie z oczekiwaniami w Firefox, Chrome i Safari, ale zwraca input: upload: addPassword w IE9

(2). $(':focus')zwraca input: text: name zgodnie z oczekiwaniami w Firefox i Safari, ale nic w 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>

Spróbuj tego:

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

Jak to się stało, że nikt nie wspomniał ...

document.activeElement.id

Używam IE8 i nie przetestowałem go w żadnej innej przeglądarce. W moim przypadku używam go, aby upewnić się, że pole ma minimum 4 znaki i jest skoncentrowane przed działaniem. Po wprowadzeniu czwartej cyfry zostanie ona uruchomiona. Pole ma identyfikator „rok”. Ja używam..

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

$(':focus')[0] da ci faktyczny element.

$(':focus') da ci tablicę elementów, zwykle tylko jeden element jest skupiony na raz, więc jest to lepsze tylko, jeśli w jakiś sposób masz skupione wiele elementów.

Spróbuj tego::

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

Jeśli chcesz potwierdzić, czy fokus jest z elementem, to

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