Jak uzyskać element skupiony za pomocą jQuery?

Odpowiedzi:

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;

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)
gdoron wspiera Monikę
źródło
2
ale poczekaj, jak mogę uzyskać element, który ma daszek?
dave
@dave. Co masz na myśli mówiąc „ma daszek” ? skoncentrowany? mysz na nim jest?
gdoron wspiera Monikę
Cóż, oto moja sytuacja: kiedy klikam określony element, chcę umieścić znak w ostatnim zaznaczonym elemencie wejściowym. Zasadniczo element, który skupił się ostatnio lub tuż przed kliknięciem tego konkretnego elementu.
dave
1
@dave. Nie da się tego zrobić. Myślę, że tylko IE ma tę funkcję, ale zadajesz teraz inne pytanie, powinieneś to zrobić w nowym pytaniu.
gdoron wspiera Monikę
3
Podoba mi się, jak użyłeś nazwy zmiennej z prefiksem $ $focused, ponieważ zakładam, że robisz to, aby zaznaczyć, że var jest obiektem jquery. TYVM.
Valamas,
36
$( document.activeElement )

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

Grilse
źródło
1
jak zdobyć element, który ma daszek?
dave
6

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>
ucdream
źródło
5

Spróbuj tego:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
Adil Malik
źródło
Tak, dlatego ta pętla będzie miała tylko jedną iterację. alert ma jedynie na celu pokazanie przykładu. Jeśli masz tę zmienną, możesz wszystko z dowolnym elementem.
Adil Malik
Jak można skupić więcej niż jeden element?
Andreas Furster,
@AndreasFurster masz rację. W tej pętli zawsze będzie tylko jedna iteracja. To może nie być najlepszy sposób na osiągnięcie celu, ale działa.
Adil Malik
Zobacz zaakceptowaną odpowiedź, aby dowiedzieć się, dlaczego jest to najgorszy / najmniej wydajny sposób na zrobienie tego. (niepotrzebne .eachnieporozumienie)
Brad Kent
2

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
}
Sparky aka tom
źródło
1

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

Travis Heeter
źródło
1

Spróbuj tego::

$(document).on("click",function(){
    alert(event.target);
    });
Pudugurthi Ravindar
źródło
0

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

if ($('#inputId').is(':focus')) {
    //your code
}
Sandeep Singh
źródło