Come ottenere l'elemento focalizzato con jQuery?


Risposte:


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;

Quale dovresti usare? citando i documenti jQuery :

Come con altri selettori di pseudo-classe (quelli che iniziano con un ":"), si consiglia di precedere: focus con un nome di tag o qualche altro selettore; in caso contrario, il selettore universale ("*") è implicito. In altre parole, il nudo $(':focus')è equivalente a $('*:focus'). Se stai cercando l'elemento attualmente focalizzato, $ (document.activeElement) lo recupererà senza dover cercare nell'intero albero DOM.

La risposta è:

document.activeElement

E se vuoi un oggetto jQuery che avvolge l'elemento:

$(document.activeElement)

2
ma aspetta, come posso ottenere l'elemento che ha il cursore?
dave,

@ Dave. Cosa intendi con "ha il guardiano" ? focalizzata? il mouse è su di esso?
gdoron sostiene Monica il

bene, ecco la mia situazione: quando faccio clic su un elemento particolare, voglio posizionare un carattere nell'ultimo elemento di testo di input focalizzato. Fondamentalmente l'elemento che aveva il focus ultimo o giusto prima di fare clic su quel particolare elemento.
dave,

1
@ Dave. Non si può fare. Penso che solo IE abbia questa funzionalità, ma ora stai ponendo una domanda diversa, dovresti farlo in una nuova domanda.
gdoron sostiene Monica il

3
Mi piace il modo in cui hai usato il nome della variabile $ prefissato $focused, poiché suppongo che lo faccia per indicare che var è un oggetto jquery. TYVM.
Valamas,


6

Ho testato due modi in Firefox, Chrome, IE9 e Safari.

(1). $(document.activeElement)funziona come previsto in Firefox, Chrome e Safari.

(2). $(':focus')funziona come previsto in Firefox e Safari.

Mi sono spostato nel mouse per inserire "nome" e ho premuto Invio sulla tastiera, quindi ho cercato di ottenere l'elemento focalizzato.

(1). $(document.activeElement)restituisce l'input: text: name come previsto in Firefox, Chrome e Safari, ma restituisce input: submit: addPassword in IE9

(2). $(':focus')restituisce input: testo: nome come previsto in Firefox e Safari, ma nulla in 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

Prova questo:

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

Sì, ecco perché questo ciclo avrà una sola iterazione. avviso è solo per dimostrare l'esempio. Se hai questa variabile, puoi fare tutto con l'elemento che desideri.
Adil Malik,

Come è possibile mettere a fuoco più di un elemento?
Andreas Furster,

@AndreasFurster hai ragione. Ci sarà sempre una sola iterazione in questo ciclo. Questo potrebbe non essere il modo migliore per raggiungere l'obiettivo, ma funziona.
Adil Malik,

Vedi la risposta accettata per scoprire perché questo è il modo peggiore / meno efficiente per farlo. (inutile .eachnon resistere)
Brad Kent

2

Come mai nessuno ha menzionato ...

document.activeElement.id

Sto usando IE8 e non l'ho provato su nessun altro browser. Nel mio caso, lo sto usando per assicurarsi che un campo abbia un minimo di 4 caratteri e sia focalizzato prima di recitare. Una volta inserito il 4 ° numero, si innesca. Il campo ha un ID di "anno". Sto usando..

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

1

$(':focus')[0] ti darà l'elemento reale.

$(':focus') ti fornirà una serie di elementi, di solito viene focalizzato solo un elemento alla volta, quindi è meglio solo se hai in qualche modo focalizzato più elementi.



0

Se vuoi confermare se lo stato attivo è con un elemento allora

if ($('#inputId').is(':focus')) {
    //your code
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.