Comment déterminer si un élément d'entrée est ciblé dans jQuery ?

Comment utiliser jQuery pour déterminer si une entrée est ciblée

Dans la page d'accueil d'un site Web, plusieurs <div> Les éléments utilisent la pseudo-classe CSS :hover pour afficher une bordure lorsque la souris les survole. L'un de ces <div> elements contient un <form> qui, avec l'aide de jQuery, maintient la bordure lorsque l'un de ses éléments d'entrée a le focus.

Cette configuration fonctionne parfaitement, sauf dans IE6, qui ne prend pas en charge :hover sur des éléments autres que <a> balises. Pour résoudre ce problème, jQuery est utilisé pour imiter CSS :hover en utilisant la méthode $(#element).hover().

Cependant, un problème survient lorsque jQuery gère à la fois le focus() et le hover() du formulaire. . Lorsqu'un élément d'entrée obtient le focus et que l'utilisateur déplace la souris vers l'intérieur et l'extérieur, la bordure disparaît.

Pour résoudre ce problème, envisagez d'utiliser une instruction conditionnelle. Par exemple, en vérifiant si des entrées ont le focus sur les événements de sortie de souris, il est possible d'empêcher la bordure de disparaître. Étant donné que jQuery ne dispose pas d'un sélecteur :focus, des approches alternatives doivent être explorées.

jQuery 1.6

jQuery 1.6 a introduit un sélecteur :focus, éliminant le besoin d'implémentations personnalisées. Utilisez simplement :

$("..").is(":focus")

jQuery 1.5 et versions antérieures

De nouvelles méthodes ont émergé pour tester la concentration, y compris la mise en œuvre de Ben Alman :

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

Ceci définit un sélecteur personnalisé, permettant une utilisation comme :

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

Tout Version jQuery

Pour récupérer l'élément actuellement ciblé :

$(document.activeElement)

Pour assurer la compatibilité avec les deux versions de jQuery 1.6 et inférieures :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!