Comment puis-je détecter de manière fiable le focus d'entrée pour les effets de survol dynamiques avec jQuery sur différentes versions de navigateur ?

Exploiter jQuery pour détecter le focus d'entrée pour les effets de survol dynamiques

Lors de la conception d'interfaces utilisateur, il est crucial de prendre en compte la compatibilité entre navigateurs. Alors que les effets de survol utilisant CSS :hover fonctionnent de manière transparente dans la plupart des navigateurs modernes, IE6 pose un défi car il ne prend en charge que :hover sur les balises d'ancrage (). Pour résoudre ce problème, jQuery propose la méthode hover() comme solution. Cependant, cette méthode entre en conflit avec l'événement focus() de jQuery lorsqu'elle est appliquée à un

élément contenant une entrée.

Pour surmonter cet obstacle, nous pouvons implémenter une logique conditionnelle pour empêcher la bordure de disparaître lorsque l'utilisateur passe la souris sur une entrée avec le focus. Malheureusement, jQuery ne dispose pas d'un sélecteur :focus, ce qui incite à rechercher une solution alternative.

jQuery 1.6 et versions ultérieures

Dans jQuery 1.6, un sélecteur :focus a été introduit, simplifier la tâche. Utilisez simplement le code :

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

jQuery 1.5 et versions antérieures

Pour les versions antérieures de jQuery, vous pouvez définir un sélecteur personnalisé :

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

Cela vous permet de vérifier le focus en utilisant :

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

Toutes les versions de jQuery

Pour déterminer quel élément a actuellement le focus :

$(document.activeElement)

Compatibilité entre versions

Si vous n'êtes pas sûr de la version de jQuery, vérifiez si le sélecteur :focus existe. Sinon, ajoutez-le manuellement :

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

En mettant en œuvre ces solutions, vous pouvez garantir que les interactions de focus de saisie se comportent de manière cohérente dans tous les navigateurs.

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!