Comment puis-je utiliser jQuery pour détecter le focus d'entrée et empêcher la suppression des bordures lors de la sortie de la souris ?

Utilisation de jQuery pour déterminer le focus d'entrée et empêcher la suppression des bordures

Dans la quête d'une compatibilité entre navigateurs, l'utilisation du .hover de jQuery () pour imiter la méthode :hover de CSS sur des objets non- éléments dans Internet Explorer 6 a conduit à un problème imprévu. Lorsqu'une entrée dans l'un de ces

obtient le focus, la bordure créée par la méthode .hover() disparaît dès le retrait de la souris.

Pour résoudre ce problème, nous cherchons à vérifier si une entrée a le focus sur souris dehors. Étant donné que jQuery ne dispose pas d'un sélecteur :focus, des méthodes alternatives sont nécessaires.

jQuery 1.6 et versions ultérieures

jQuery 1.6 inclut un sélecteur :focus, éliminant le besoin d'implémentations personnalisées. Utilisez simplement $("..").is(":focus") pour vérifier les entrées ciblées.

jQuery 1.5 et versions antérieures

Pour les versions antérieures de jQuery, il est recommandé de définir un sélecteur :focus personnalisé. Ceci peut être réalisé avec :

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

Cela garantit que seuls les contrôles de formulaire et les hyperliens sont considérés comme ciblés.

Vous pouvez également utiliser :

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

ou :

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

Toutes les versions de jQuery

À déterminez quel élément a le focus, quelle que soit la version de jQuery, utilisez :

$(document.activeElement)

Vérification des éléments manquants :focus Selector

Si vous n'êtes pas sûr de la version de jQuery, vous Vous pouvez ajouter le sélecteur :focus manuellement :

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

En employant ces techniques, vous pouvez conserver le comportement de bordure souhaité tout en vous adaptant aux spécificités du navigateur. limites.

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!