Utilisation de jQuery pour tester si une entrée a le focus

Question

Sur la première page d'un site que je construis, plusieurs <div>s utiliser le CSS :hover propriété pour ajouter une bordure lorsque la souris est au-dessus d'eux. L'un de l' <div>s contient un <form> qui, à l'aide de jQuery, permet de garder la frontière si une entrée à l'intérieur, il a le focus. Cela fonctionne parfaitement sauf que IE6 ne supporte pas :passez la souris sur des éléments autres que <a>s. Donc, pour ce navigateur que nous utilisons jQuery pour imiter css :hover à l'aide de l' $(#).hover() la méthode. Le seul problème est que, maintenant que jQuery gère à la fois la forme de focus() et hover(), lorsqu'une entrée a le focus, puis l'utilisateur déplace la souris dans et à l'extérieur, la frontière s'en va.

Je me disais qu'on pourrait utiliser une certaine forme de conditionnel pour mettre fin à ce comportement. Par exemple, si nous avons testé sur la souris si l'un d'entrées avait le focus, nous pourrions nous arrêter à la frontière de s'en aller. Autant que je sache, il n'y a pas d' :focus sélecteur jQuery, donc je ne sais pas comment faire ça. Des idées?

Merci pour votre aide.

Answer 1

jQuery 1.6+

jQuery ajouté un :focus sélecteur donc nous n'avons plus besoin de l'ajouter nous-mêmes. Suffit d'utiliser $("..").is(":focus")

jQuery 1.5 et au-dessous de

Edit: Comme les temps ont changé, nous avons trouver de meilleures méthodes pour les tests de focus, le nouveau favori est ce gist de Ben Alman:

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

Cité de Mathias Bynens ici:

Notez que l' (elem.type || elem.href) test a été ajouté à 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 les liens hypertexte.

Vous êtes à la définition d'un nouveau sélecteur. Voir Plugins/Création. Ensuite, vous pouvez faire:

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

ou:

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

Tout jQuery

Si vous voulez juste de comprendre que l'élément a le focus, vous pouvez utiliser

$(document.activeElement)

Si vous ne savez pas si la version 1.6 ou plus bas, vous pouvez ajouter l' :focus sélecteur si elle est manquante:

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

Answer 2

CSS:

 .focus {
border-color:red;
}
 

JQuery:

 $(document).ready(function() {    

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

});
 

Answer 3

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 test (elem.type || elem.href) a été ajouté pour filtrer les faux positifs comme body . De cette façon, nous nous assurons de filtrer tous les éléments sauf les contrôles de formulaire et les hyperliens.

(Tiré de cette substance par Ben Alman .)

Answer 4

Je ne suis pas tout à fait sûr de ce que vous recherchez, mais cela semble possible en stockant l'état des éléments d'entrée (ou le 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;
        });
});
 

Answer 5

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