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 ?-js tutoriel-php.cn

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 ?

Susan Sarandon

Libérer： 2024-11-29 02:50:10

original

394 Les gens l'ont consulté

How Can I Use jQuery to Detect Input Focus and Prevent Border Removal on Mouse Out?

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 &amp;&amp; ( elem.type || elem.href );
};

Copier après la connexion

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")) { ... }

Copier après la connexion

ou :

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

Copier après la connexion

Toutes les versions de jQuery

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

$(document.activeElement)

Copier après la connexion

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 &amp;&amp; ( elem.type || elem.href );
        };
    }
})( jQuery );

Copier après la connexion

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!