web-dev-qa-db-fra.com

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

Avec jQuery, comment puis-je obtenir l’élément d’entrée ayant le focus du curseur (curseur)? 

Ou en d'autres termes, comment déterminer si une entrée a le focus du curseur?

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

Lequel devriez-vous utiliser? citant les docs jQuery :

Comme avec d'autres sélecteurs de pseudo-classes (ceux qui commencent par ":"), il est recommandé de faire précéder: focus d'un nom de tag ou d'un autre sélecteur; sinon, le sélecteur universel ("*") est impliqué. En d'autres termes, la $(':focus') nue est équivalente à $('*:focus'). Si vous recherchez l'élément actuellement ciblé, $ (document.activeElement) le récupérera sans qu'il soit nécessaire de rechercher dans tout l'arborescence DOM.

La réponse est:

document.activeElement

Et si vous voulez un objet jQuery encapsulant l’élément:

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

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

31
Grilse

Essaye ça:

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

J'ai testé deux méthodes 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 entrer 'nom' et appuyé sur Entrée sur le clavier, puis j'ai essayé d'obtenir l'élément ciblé. 

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

(2). $(':focus') renvoie input: text: 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>
5
ucdream

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

document.activeElement.id

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

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

Essaye ça::

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

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

$(':focus') vous donnera un tableau d’éléments. En général, un seul élément est ciblé à la fois. C’est mieux si vous avez en quelque sorte plusieurs éléments.

0
Travis Heeter