Wie bekommt man das fokussierte Element mit jQuery?

Question

Wie kann ich mit jQuery das Eingabeelement erhalten, das den Fokus des Cursors hat?

Oder anders ausgedrückt: Wie lässt sich feststellen, ob eine Eingabe den Fokus des Cursors hat?

Answer 1

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

Welchen sollten Sie verwenden? unter Angabe der jQuery-Dokumente :

Wie bei anderen Pseudoklassen-Selektoren (die mit einem ":" beginnen) wird empfohlen, :focus einen Tag-Namen oder einen anderen Selektor voranzustellen; andernfalls wird der universelle Selektor ("*") impliziert. Mit anderen Worten, der bloße $(':focus') ist gleichbedeutend mit $('*:focus') . Wenn Sie nach dem aktuell fokussierten Element suchen, wird es mit $( document.activeElement ) abgerufen, ohne den gesamten DOM-Baum durchsuchen zu müssen.

Die Antwort lautet:

document.activeElement

Und wenn Sie möchten, dass ein jQuery-Objekt das Element umhüllt:

$(document.activeElement)

Answer 2

$( document.activeElement )

wird es abrufen, ohne den gesamten DOM-Baum durchsuchen zu müssen, wie es auf der jQuery-Dokumentation

Answer 3

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 in Firefox und Safari wie erwartet.

Ich habe mit der Maus "Name" eingegeben und die Eingabetaste auf der Tastatur gedrückt, dann habe ich versucht, das fokussierte Element zu erhalten.

(1). $(document.activeElement) liefert input:text:name wie erwartet in Firefox, Chrome und Safari, aber input:submit:addPassword in IE9

(2). $(':focus') liefert input:text:name wie erwartet in Firefox und Safari, 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>

Answer 4

Versuchen Sie dies:

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

Answer 5

Wie kommt es, dass niemand erwähnt hat

document.activeElement.id

Ich verwende IE8 und habe es nicht mit einem anderen Browser getestet. In meinem Fall verwende ich es, um sicherzustellen, dass ein Feld mindestens 4 Zeichen lang ist und fokussiert wird, bevor ich handle. Sobald Sie die 4. Zahl eingeben, wird es ausgelöst. Das Feld hat die ID "Jahr". Ich verwende

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