Wie bekomme ich das fokussierte Element mit jQuery?

Antworten:

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;

Welches solltest du verwenden? Zitieren der jQuery-Dokumente :

Wie bei anderen Pseudoklassen-Selektoren (die mit einem ":" beginnen) wird empfohlen, Folgendes vorangestellt zu haben: Fokus mit einem Tag-Namen oder einem anderen Selektor; Andernfalls wird der Universalwähler ("*") impliziert. Mit anderen Worten, das Nackte $(':focus')ist gleichbedeutend mit $('*:focus'). Wenn Sie nach dem aktuell fokussierten Element suchen, ruft $ (document.activeElement) es ab, ohne den gesamten DOM-Baum durchsuchen zu müssen.

Die Antwort ist:

document.activeElement

Und wenn Sie möchten, dass ein jQuery-Objekt das Element umschließt:

$(document.activeElement)
Gdoron unterstützt Monica
quelle
2
aber warte, wie bekomme ich das Element, das das Caret hat?
Dave
@ Dave. Was meinst du mit "hat das Caret" ? fokussiert? die maus ist drauf?
Gdoron unterstützt Monica
Nun, hier ist meine Situation: Wenn ich auf ein bestimmtes Element klicke, möchte ich ein Zeichen in das letzte fokussierte Eingabetextelement einfügen. Grundsätzlich das Element, das zuletzt oder direkt vor dem Klicken auf das jeweilige Element den Fokus hatte.
Dave
1
@ Dave. Das geht nicht. Ich denke, nur IE hat diese Funktion, aber Sie stellen jetzt eine andere Frage, Sie sollten es in einer neuen Frage tun.
Gdoron unterstützt Monica
3
Mir gefällt, wie Sie den Variablennamen mit dem Präfix $ verwendet haben $focused, da ich davon ausgehe, dass Sie dies tun, um zu kennzeichnen, dass die Variable ein jquery-Objekt ist. TYVM.
Valamas
36
$( document.activeElement )

Ruft es ab, ohne den gesamten DOM-Baum durchsuchen zu müssen, wie in der jQuery-Dokumentation empfohlen

Grilse
quelle
1
Wie bekomme ich ein Element, das das Caret hat?
Dave
6

Ich habe zwei Möglichkeiten in Firefox, Chrome, IE9 und Safari getestet.

(1). $(document.activeElement)funktioniert wie erwartet in Firefox, Chrome und Safari.

(2). $(':focus')funktioniert wie erwartet in Firefox und Safari.

Ich bewegte mich in die Maus, um 'Name' einzugeben und drückte die Eingabetaste auf der Tastatur, dann versuchte ich, das fokussierte Element zu erhalten.

(1). $(document.activeElement)Gibt die Eingabe: text: name wie in Firefox, Chrome und Safari erwartet zurück, gibt jedoch die Eingabe zurück: submit: addPassword in IE9

(2). $(':focus')Gibt Eingabe zurück: Text: Name wie in Firefox und Safari erwartet, aber nichts im 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
quelle
5

Versuche dies:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
Adil Malik
quelle
Ja, deshalb hat diese Schleife nur eine Iteration. Warnung ist nur, um das Beispiel zu demonstrieren. Wenn Sie diese Variable haben, können Sie alles mit dem gewünschten Element.
Adil Malik
Wie ist es möglich, mehr als ein Element zu fokussieren?
Andreas Furster
@AndreasFurster du hast recht. Es wird immer nur eine Iteration in dieser Schleife geben. Dies ist möglicherweise nicht der beste Weg, um das Ziel zu erreichen, aber es funktioniert.
Adil Malik
Lesen Sie die akzeptierte Antwort, um zu erfahren, warum dies der schlechteste / am wenigsten effiziente Weg ist. (unnötig .eachnicht widerstehen)
Brad Kent
2

Wie ist es, dass niemand erwähnt hat ..

document.activeElement.id

Ich verwende IE8 und habe es in keinem anderen Browser getestet. In meinem Fall verwende ich es, um sicherzustellen, dass ein Feld mindestens 4 Zeichen enthält und fokussiert ist, bevor ich spiele. Sobald Sie die 4. Nummer eingegeben haben, wird diese ausgelöst. Das Feld hat die ID 'Jahr'. Ich benutze..

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

$(':focus')[0] gibt Ihnen das eigentliche Element.

$(':focus') Sie erhalten eine Reihe von Elementen. In der Regel wird jeweils nur ein Element fokussiert. Dies ist also nur dann besser, wenn Sie mehrere Elemente fokussiert haben.

Travis Heeter
quelle
1

Versuche dies::

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

Wenn Sie bestätigen möchten, ob der Fokus auf einem Element liegt, dann

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