Comment déterminer si un élément d'entrée est ciblé dans jQuery ?-js tutoriel-php.cn

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

Barbara Streisand

Libérer： 2024-11-21 09:47:14

original

1064 Les gens l'ont consulté

How to Determine if an Input Element is Focused in jQuery?

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

Dans la page d'accueil d'un site Web, plusieurs

Les éléments utilisent la pseudo-classe CSS :hover pour afficher une bordure lorsque la souris les survole. L'un de ces

elements contient un

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 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")

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

Tout Version jQuery

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

$(document.activeElement)

Copier après la connexion

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

Copier après la connexion

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!

Article précédent：Comment puis-je récupérer des variables dans la portée d'une fonction JavaScript ? Article suivant：Simplifiez TailwindCSS avec TailwindBox

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers numéros