web-dev-qa-db-fra.com

Existe-t-il un «a focus» en JavaScript (ou jQuery)?

Y a-t-il quelque chose que je peux faire comme ça (peut-être via un plugin)

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

Fondamentalement, définissez le focus sur la première entrée, mais uniquement si l'utilisateur n'a pas déjà cliqué sur quoi que ce soit?

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);
});
javascriptjqueryjquery-selectors
45
alex

Il n'y a pas de solution native mais oui, il existe une manière plus élégante de le faire:

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

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

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

ou:

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

$('input:focus')

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

Attachez simplement le processus que vous voulez faire à ce sélecteur, et il le supprimera si l'élément en question n'est pas ciblé. J'ai fait cela récemment pour empêcher un keyup d'instancier une vérification d'erreur d'entrée de courrier électronique lorsque l'entrée de courrier électronique 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! */
}
26
dclowd9901

jQuery 1.6 dispose désormais d'un :focus sélecteur.

11
alex

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

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

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

Donc, maintenant, cela fonctionne comme prévu.

Cependant, je rencontrais un comportement étrange dans Firefox 3.6.8 (peut-être un bug dans FF?). Si je cliquais sur un texte d'entrée pendant le rendu de la page, et si j'appelais is(":focus") au chargement de la page, j'obtiendrais une erreur du navigateur, signalée par FireBug, et le script se briserait.

Pour résoudre ce problème, j'ai entouré le code d'un bloc try...catch, Renvoyant false en cas d'erreur. Utilisez-le si vous souhaitez 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; }
    }
});
9
luiggitama

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); });
7
SLaks

Frustrant, il est difficile de trouver une solution à ce problème étant donné que la solution est en fait très simple:

if (document.activeElement == this) {
  // has focus
}

if (document.activeElement != this) {
  // does not have focus
}
6
user5185370

Il existe un plugin http://plugins.jquery.com/project/focused

Vous pouvez également vérifier en utilisant jQuery pour tester si une entrée a le focus

3
kasp3r

Voici une manière succincte de le faire.

$(document.activeElement)

ou pour le brancher dans votre exemple ..

if ($('form#contact input]')[0]!=$(document.activeElement)) { ... }
2
JohnFx

Je sais que c'est une vieille question, mais peut-être que ma solution aidera quelqu'un :)

car cela n'a pas fonctionné pour moi:

if ($(this)!=$(document.activeElement)) { ... }

..were "this" est renvoyé par la fonction de flou. Alors j'ai fait ça:

if ($(document.activeElement).attr("class") != "input_textbox"){ ... }
2
ExEdzy