Wie bekomme ich das fokussierte Element mit jQuery?

Wie kann ich mit jQuery das Eingabeelement abrufen, das den Fokus des Carets (Cursors) hat?

Oder mit anderen Worten, wie kann festgestellt werden, ob eine Eingabe den Fokus des Carets hat?

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

$( document.activeElement )

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

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>

Versuche dies:

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

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
}

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

Versuche dies::

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

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

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