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

Question

En utilisant jQuery, comment puis-je obtenir l'élément d'entrée qui a le focus du caret (curseur) ?

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

Answer 1

// 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 devez-vous utiliser ? en citant le Documentation sur jQuery :

Comme pour les autres sélecteurs de pseudo-classe (ceux qui commencent par un " :"), il est recommandé de faire précéder :focus d'un nom de balise ou d'un autre sélecteur ; sinon, le sélecteur universel ("*") est implicite. En d'autres termes, la balise $(':focus') est équivalent à $('*:focus') . Si vous recherchez l'élément sur lequel vous vous trouvez, $( document.activeElement ) le récupérera sans avoir à parcourir l'ensemble du DOM.

La réponse est :

document.activeElement

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

$(document.activeElement)

Answer 2

$( document.activeElement )

le récupérera sans avoir à chercher dans toute l'arborescence du DOM, comme le recommande la directive Documentation sur jQuery

Answer 3

J'ai testé les 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.

J'ai déplacé la souris pour saisir le 'nom' et j'ai appuyé sur la touche Enter du clavier, puis j'ai essayé d'obtenir l'élément ciblé.

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

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

Answer 4

Essayez ça :

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

Answer 5

Comment se fait-il que personne n'ait 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 comporte un minimum de 4 caractères et qu'il est ciblé avant d'agir. Dès que vous entrez le quatrième chiffre, il se déclenche. Le champ a pour identifiant "year". J'utilise

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