Comment obtenir l'élément ciblé avec jQuery?

Réponses:

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;

Lequel devriez-vous utiliser? citant les documents jQuery :

Comme avec les autres sélecteurs de pseudo-classe (ceux qui commencent par un ":"), il est recommandé de précéder: le focus avec un nom de balise ou un autre sélecteur; sinon, le sélecteur universel ("*") est implicite. En d'autres termes, le nu $(':focus')équivaut à $('*:focus'). Si vous recherchez l'élément actuellement ciblé, $ (document.activeElement) le récupérera sans avoir à rechercher dans l'arborescence DOM entière.

La réponse est:

document.activeElement

Et si vous voulez un objet jQuery enveloppant l'élément:

$(document.activeElement)
gdoron soutient Monica
la source
2
mais attendez, comment puis-je obtenir l'élément qui a le curseur?
Dave
@dave. Que voulez-vous dire par "a le curseur" ? concentré? la souris est dessus?
gdoron soutient Monica
voici ma situation: lorsque je clique sur un élément particulier, je veux placer un caractère dans le dernier élément de texte d'entrée focalisé. Fondamentalement, l'élément qui avait le focus en dernier ou juste avant de cliquer sur cet élément particulier.
dave
1
@dave. Ça ne peut pas être fait. Je pense que seul IE a cette fonctionnalité, mais vous posez maintenant une question différente, vous devriez le faire dans une nouvelle question.
gdoron soutient Monica
3
J'aime la façon dont vous avez utilisé le nom de variable préfixée $ $focused, car je suppose que vous faites cela pour indiquer que var est un objet jquery. TYVM.
Valamas
36 
$( document.activeElement )

Le récupérera sans avoir à rechercher dans tout l'arbre DOM comme recommandé dans la documentation jQuery

Grilse
la source
1
comment obtenir l'élément qui a le curseur?
dave
6

J'ai testé deux façons dans Firefox, Chrome, IE9 et Safari.

(1). $(document.activeElement)fonctionne comme prévu dans Firefox, Chrome et Safari.

(2). $(':focus')fonctionne comme prévu dans Firefox et Safari.

Je me suis déplacé dans la souris pour saisir «nom» et j'ai appuyé sur Entrée sur le clavier, puis j'ai essayé d'obtenir l'élément focalisé.

(1). $(document.activeElement)renvoie l'entrée: text: nom comme prévu dans Firefox, Chrome et Safari, mais il renvoie input: submit: addPassword dans IE9

(2). $(':focus')renvoie entrée: texte: nom comme prévu dans Firefox et Safari, mais rien dans 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
la source
5

Essaye ça:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});
Adil Malik
la source
Oui, c'est pourquoi cette boucle n'aura qu'une seule itération. alert est juste pour montrer l'exemple. Si vous avez cette variable, vous pouvez tout avec l'élément que vous souhaitez.
Adil Malik
Comment est-il possible de concentrer plus d'un élément?
Andreas Furster du
@AndreasFurster vous avez raison. Il n'y aura toujours qu'une seule itération dans cette boucle. Ce n'est peut-être pas la meilleure façon d'atteindre l'objectif, mais cela fonctionne.
Adil Malik
Voir la réponse acceptée pour savoir pourquoi c'est la façon la pire / la moins efficace de le faire. ( .eachnon-résistance inutile )
Brad Kent
2

Comment est-ce que personne n'a mentionné ..

document.activeElement.id

J'utilise IE8 et je ne l'ai testé sur aucun autre navigateur. Dans mon cas, je l'utilise pour m'assurer qu'un champ est un minimum de 4 caractères et concentré avant d'agir. Une fois que vous entrez le 4e numéro, il se déclenche. Le champ a un identifiant «année». J'utilise..

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

$(':focus')[0] vous donnera l'élément réel.

$(':focus') vous donnera un tableau d'éléments, généralement un seul élément est focalisé à la fois, ce n'est donc mieux que si vous avez en quelque sorte plusieurs éléments focalisés.

Travis Heeter
la source
1

Essaye ça::

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

Si vous voulez confirmer si le focus est sur un élément, 

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