Existe-t-il une fonction "has focus" en JavaScript (ou jQuery) ?

Question

Y a-t-il quelque chose que je puisse faire comme ceci (peut-être via un plugin) ?

if ( ! $('form#contact input]').hasFocus()) {
  $('form#contact input:first]').focus();
}

En gros, mettre le focus sur la première entrée, mais seulement si l'utilisateur n'a pas déjà cliqué sur quelque chose ?

Je sais que cela fonctionnera aussi, mais y a-t-il quelque chose de plus élégant ?

$(function() {
  var focused = false;
  $('form#contact input]').focus(function() {
    focused = true;
  }); 
  setTimeout(function() {
    if ( ! focused) {      
      $('form#contact input:first]').focus();
    }
  }, 500);
});

Answer 1

Il n'y a pas de solution native, mais il existe une façon plus élégante de procéder :

jQuery.extend(jQuery.expr[':'], {
  focus: "a == document.activeElement"
});

Vous définissez un nouveau sélecteur. Voir Plugins/Authoring . Alors vous pouvez le faire :

if ($("...").is(":focus")) {
  ...
}

ou :

$("input:focus").doStuff();

Answer 2

$('input:focus')

C'est du CSS. Vous n'avez pas besoin de créer un "sélecteur personnalisé". Il existe déjà ! http://www.w3schools.com/CSS/pr_pseudo_focus.asp

Il suffit d'attacher le processus que vous voulez faire à ce sélecteur, et il l'éliminera si l'élément en question n'est pas focalisé. Je l'ai fait récemment pour garder un keyup de l'instanciation d'un contrôle d'erreur de l'entrée d'e-mail lorsque l'entrée d'e-mail n'était pas utilisée.

Si tout ce que vous essayez de faire est de vérifier si l'utilisateur s'est concentré sur quelque chose lui-même, faites simplement ceci :

if($('input:focus').size() == 0){
    /* Perform your function! */
}

Answer 3

JQuery 1.6 dispose désormais d'une fonction dédiée :focus sélecteur.

Answer 4

J'ai eu des problèmes avec l'approche de cletus, en utilisant jQuery 1.3.2 et Firefox 3.6.8, car la chaîne de caractères "a == document.activeElement" n'était pas une fonction valide.

Je l'ai corrigé en définissant une fonction pour le focus clé. En fait, toutes les autres clés définies dans jQuery.expr[':'] sont définis comme des fonctions. Voici le code :

jQuery.extend(jQuery.expr[':'], {
    focus: function(e){ return e == document.activeElement; }
});

Maintenant, cela fonctionne comme prévu.

Cependant, j'ai constaté un comportement étrange dans Firefox 3.6.8 (peut-être un bogue dans FF ?). Si je cliquais sur un texte d'entrée alors que la page était en cours de rendu, et si j'appelais is(":focus") au chargement de la page, je recevais une erreur du navigateur, signalée par FireBug, et le script se brisait.

Pour résoudre ce problème, j'ai entouré le code d'une balise de type try...catch en retournant false en cas d'erreur. Utilisez-le si vous voulez empêcher vos utilisateurs de rencontrer la même erreur :

jQuery.extend(jQuery.expr[':'], {
    focus: function(e){
        try{ return e == document.activeElement; }
        catch(err){ return false; }
    }
});

Answer 5

Non, il n'y en a pas.

Cependant, vous pouvez le simuler comme ceci :

$(':input')
    .data('focused', false)
    .focus(function() { $.data(this, 'focused', true); })
    .blur(function() { $.data(this, 'focused', false); });