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

À l'aide de jQuery, comment puis-je obtenir l'élément d'entrée qui a le focus du curseur (curseur)?

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

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

$( document.activeElement )

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

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>

Essaye ça:

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

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
}

$(':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.

Essaye ça::

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

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

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