it-swarm.com.de

Wie erhält man das fokussierte Element mit jQuery?

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

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

310
dave
// 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 sollten Sie verwenden? Zitiert die jQuery-Dokumente :

Wie bei anderen Pseudo-Klassen-Selektoren (diejenigen, die mit einem ":" beginnen), wird empfohlen, Folgendes vorzustellen: Focus mit einem Tag-Namen oder einem anderen Selektor; Andernfalls ist der Universalselektor ("*") impliziert. Mit anderen Worten, das bloße $(':focus') entspricht $('*:focus'). Wenn Sie nach dem aktuell fokussierten Element suchen, wird es von $ (document.activeElement) abgerufen, 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 umgibt:

$(document.activeElement)
678
gdoron
$( document.activeElement )

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

31
Grilse

Versuche dies:

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

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

(1). $(document.activeElement) funktioniert erwartungsgemäß in Firefox, Chrome und Safari.

(2). $(':focus') funktioniert erwartungsgemäß in Firefox und Safari.

Ich fuhr mit der Maus zur Eingabe von 'name' und drückte die Eingabetaste auf der Tastatur. Dann versuchte ich, das fokussierte Element zu erhalten. 

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

(2). $(':focus') gibt die Eingabe zurück: 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>
5
ucdream

Wie hat es niemand erwähnt ..

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 umfasst und fokussiert ist, bevor er agiert. Sobald Sie die vierte Zahl eingegeben haben, wird sie ausgelöst. Das Feld hat eine ID von 'Jahr'. Ich benutze..

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

Versuche dies::

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

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

$(':focus') gibt Ihnen ein Array von Elementen. Normalerweise wird immer nur ein Element fokussiert. Dies ist nur dann besser, wenn Sie mehrere Elemente fokussiert haben.

0
Travis Heeter