Sur la première page d'un site que je construis, plusieurs <div>utilisent la :hoverpseudo-classe CSS pour ajouter une bordure lorsque la souris les survole. L'un des <div>s contient un <form>qui, à l'aide de jQuery, conservera la bordure si une entrée en son sein a le focus. Cela fonctionne parfaitement sauf que IE6 ne prend en charge :hoveraucun élément autre que <a>s. Donc, pour ce navigateur uniquement, nous utilisons jQuery pour imiter CSS en :hoverutilisant la $(#element).hover()méthode. Le seul problème est, maintenant que jQuery gère à la fois le formulaire focus() et hover() , lorsqu'une entrée a le focus, l'utilisateur déplace la souris vers l'intérieur et vers l'extérieur, la bordure disparaît.

Je pensais que nous pourrions utiliser une sorte de conditionnel pour arrêter ce comportement. Par exemple, si nous testions à la souris si l'une des entrées avait le focus, nous pourrions empêcher la frontière de disparaître. AFAIK, il n'y a pas de :focussélecteur dans jQuery, donc je ne sais pas comment y arriver. Des idées?

jQuery 1.6+

jQuery a ajouté un :focussélecteur afin que nous n'ayons plus besoin de l'ajouter nous-mêmes. Utilisez simplement$("..").is(":focus")

jQuery 1.5 et inférieur

Edit: Au fur et à mesure que les temps changent, nous trouvons de meilleures méthodes pour tester la concentration, le nouveau favori est cet essentiel de Ben Alman :

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Cité par Mathias Bynens ici :

Notez que le (elem.type || elem.href)test a été ajouté pour filtrer les faux positifs comme le corps. De cette façon, nous nous assurons de filtrer tous les éléments à l'exception des contrôles de formulaire et des hyperliens.

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

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

ou:

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

Any jQuery

Si vous voulez juste savoir quel élément a le focus, vous pouvez utiliser

$(document.activeElement)

Si vous n'êtes pas sûr si la version sera 1.6 ou inférieure, vous pouvez ajouter le :focussélecteur s'il manque:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

Voici une réponse plus robuste que celle actuellement acceptée:

jQuery.expr[':'].focus = function(elem) {
  return elem === document.activeElement && (elem.type || elem.href);
};

Notez que le (elem.type || elem.href)test a été ajouté pour filtrer les faux positifs comme body. De cette façon, nous nous assurons de filtrer tous les éléments à l'exception des contrôles de formulaire et des hyperliens.

(Tiré de cet essentiel de Ben Alman .)

Mise à jour d'avril 2015

Étant donné que cette question existe depuis un certain temps et que de nouvelles conventions sont entrées en jeu, je pense que je dois mentionner que la .liveméthode a été dépréciée.

À sa place, la .onméthode a maintenant été introduite.

Leur documentation est très utile pour expliquer comment cela fonctionne;

La méthode .on () attache des gestionnaires d'événements à l'ensemble d'éléments actuellement sélectionné dans l'objet jQuery. Depuis jQuery 1.7, la méthode .on () fournit toutes les fonctionnalités requises pour attacher des gestionnaires d'événements. Pour obtenir de l'aide sur la conversion à partir d'anciennes méthodes d'événement jQuery, consultez .bind (), .delegate () et .live ().

Donc, pour que vous puissiez cibler l'événement «focalisé sur l'entrée», vous pouvez l'utiliser dans un script. Quelque chose comme:

$('input').on("focus", function(){
   //do some stuff
});

C'est assez robuste et vous permet même d'utiliser la touche TAB également.

Je ne suis pas tout à fait sûr de ce que vous recherchez, mais cela semble pouvoir être obtenu en stockant l'état des éléments d'entrée (ou la div?) En tant que variable:

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

Une alternative à l'utilisation de classes pour marquer l'état d'un élément est la fonctionnalité de stockage de données interne .

PS: Vous pouvez stocker des booléens et tout ce que vous désirez en utilisant la data()fonction. Ce n'est pas seulement une question de cordes :)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

Et puis, il s'agit simplement d'accéder à l'état des éléments.

si quelqu'un s'en soucie, il y a une bien meilleure façon de capturer le focus maintenant, $(foo).focus(...)

http://api.jquery.com/focus/

Avez-vous pensé à utiliser mouseOver et mouseOut pour simuler cela. Regardez également dans mouseEnter et mouseLeave

Gardez une trace des deux états (survolés, concentrés) en tant que drapeaux vrai / faux, et chaque fois que l'on change, exécutez une fonction qui supprime la bordure si les deux sont faux, sinon affiche la bordure.

Donc: les ensembles onfocus focalisés = vrai, les ensembles onblur focalisés = faux. onmouseover définit hovered = true, onmouseout définit hovered = false. Après chacun de ces événements, exécutez une fonction qui ajoute / supprime la bordure.

Pour autant que je sache, vous ne pouvez pas demander au navigateur si une entrée sur l'écran a le focus, vous devez configurer une sorte de suivi du focus.

J'ai généralement une variable appelée "noFocus" et je l'ai définie sur true. Ensuite, j'ajoute un événement focus à toutes les entrées qui rend faux noFocus. Ensuite, j'ajoute un événement flou à toutes les entrées qui redéfinissent noFocus sur true.

J'ai une classe MooTools qui gère cela assez facilement, je suis sûr que vous pouvez créer un plugin jquery pour faire de même.

Une fois cela créé, vous pouvez vérifier noFocus avant de faire un échange de bordure.

Il n'y a pas: focus, mais il y a: selected http://docs.jquery.com/Selectors/selected

mais si vous voulez changer l'apparence des choses en fonction de ce qui est sélectionné, vous devriez probablement travailler avec les événements de flou.

http://docs.jquery.com/Events/blur

Il existe un plugin pour vérifier si un élément est focalisé: http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

J'avais un événement .live ("focus") défini pour sélectionner () (surligner) le contenu d'une entrée de texte afin que l'utilisateur n'ait pas à le sélectionner avant de taper une nouvelle valeur.

$ (formObj) .select ();

En raison de bizarreries entre différents navigateurs, la sélection était parfois remplacée par le clic qui l'avait provoqué, et elle désélectionnait le contenu juste après en faveur de placer le curseur dans le champ de texte (fonctionnait surtout bien dans FF mais a échoué dans IE)

Je pensais pouvoir résoudre ce problème en mettant un léger retard sur la sélection ...

setTimeout (function () {$ (formObj) .select ();}, 200);

Cela a bien fonctionné et la sélection persisterait, mais un drôle de problème est survenu. Si vous tabuliez d'un champ à l'autre, le focus passait au champ suivant avant que la sélection n'ait lieu. Puisque select vole le focus, le focus reviendrait alors et déclencherait un nouvel événement "focus". Cela s'est terminé par une cascade de sélections d'entrée dansant sur tout l'écran.

Une solution réalisable serait de vérifier que le champ a toujours le focus avant d'exécuter la sélection (), mais comme mentionné, il n'y a pas de moyen simple de vérifier ... un seul appel jQuery select () dans une énorme fonction chargée de sous-programmes ...

J'ai fini par créer une classe arbitraire appelée .elementhasfocus qui est ajoutée et supprimée dans la fonction jQuery focus (). Lorsque la fonction hover () s'exécute à la sortie de la souris, elle recherche .elementhasfocus:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

Donc, s'il n'a pas cette classe (lire: aucun élément dans le div n'a le focus), la bordure est supprimée. Sinon, rien ne se passe.

Facile

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>