recherche

Maison  >  Article  >  interface Web  >  Comment déterminer si un élément d'entrée est ciblé dans jQuery ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-21 09:47:14921parcourir

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

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!

jquery css if for using class Conditional this display border input issue
Déclaration：
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
Article précédent：Comment puis-je récupérer des variables dans la portée d'une fonction JavaScript ?Article suivant：Comment puis-je récupérer des variables dans la portée d'une fonction JavaScript ?

Articles Liés

Voir plus