Verwendung von jQuery zum Testen, ob eine Eingabe den Fokus hat

Question

Auf der Titelseite einer Website, die ich aufbaue, sind mehrere <div> s verwenden die CSS :hover Pseudoklasse, um einen Rahmen hinzuzufügen, wenn sich die Maus über ihnen befindet. Eine der <div> s enthält eine <form> die unter Verwendung von jQuery den Rahmen beibehält, wenn eine Eingabe darin den Fokus hat. Dies funktioniert perfekt, außer dass IE6 nicht unterstützt :hover auf alle anderen Elemente als <a> s. Daher verwenden wir nur für diesen Browser jQuery, um CSS zu imitieren :hover unter Verwendung der $(#element).hover() Methode. Das einzige Problem ist, dass jQuery jetzt sowohl das Formular focus() et hover() Wenn eine Eingabe den Fokus hat und der Benutzer die Maus hinein- und herausbewegt, verschwindet der Rahmen.

Ich dachte, wir könnten eine Art von Bedingung verwenden, um dieses Verhalten zu stoppen. Zum Beispiel, wenn wir auf Maus heraus getestet, wenn einer der Eingänge den Fokus hatte, könnten wir die Grenze von weg gehen zu stoppen. AFAIK, gibt es keine :focus Selektor in jQuery, so bin ich nicht sicher, wie dies geschehen zu machen. Irgendwelche Ideen?

Answer 1

JQuery 1.6+

jQuery hat eine :focus Selektor, so dass wir ihn nicht mehr selbst hinzufügen müssen. Verwenden Sie einfach $("..").is(":focus")

jQuery 1.5 und niedriger

Bearbeiten: Da sich die Zeiten ändern, finden wir bessere Methoden, um den Fokus zu testen, der neue Favorit ist dieser Hinweis von Ben Alman :

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

Zitiert von Mathias Bynens aquí :

Beachten Sie, dass die (elem.type || elem.href) Test wurde hinzugefügt, um falsch positive Ergebnisse wie body herauszufiltern. Auf diese Weise stellen wir sicher, dass alle Elemente außer Formularsteuerelementen und Hyperlinks herausgefiltert werden.

Sie definieren einen neuen Selektor. Siehe Plugins/Authoring . Dann können Sie das tun:

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

oder:

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

Jedes jQuery

Wenn Sie nur herausfinden wollen, welches Element den Fokus hat, können Sie mit

$(document.activeElement)

Wenn Sie nicht sicher sind, ob die Version 1.6 oder niedriger sein wird, können Sie die :focus Selektor, wenn er fehlt:

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

Answer 2

CSS :

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

Answer 3

Hier ist eine solidere Antwort als die derzeit akzeptierte:

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

Beachten Sie, dass die (elem.type || elem.href) Test wurde hinzugefügt, um falsch-positive Ergebnisse herauszufiltern wie body . Auf diese Weise stellen wir sicher, dass alle Elemente außer Formularsteuerelementen und Hyperlinks herausgefiltert werden.

(Entnommen aus dieser Kernpunkt por Ben Alman .)

Answer 4

April 2015 Update

Da diese Frage schon eine Weile im Raum steht und einige neue Konventionen ins Spiel gekommen sind, sollte ich auf die .live Methode abgeschrieben worden.

Stattdessen wird die .on Methode wurde nun eingeführt.

Ihre Dokumentation ist recht nützlich, um zu erklären, wie es funktioniert;

Die Methode .on() fügt Ereignishandler an den aktuell ausgewählten Satz von Elementen im jQuery-Objekt. Ab jQuery 1.7 bietet die Methode .on() alle Funktionen, die für das Anhängen von Ereignishandlern erforderlich sind. Für Hilfe bei der Konvertierung von älteren jQuery-Ereignismethoden, siehe .bind(), .delegate(), und .live().

Damit Sie also das Ereignis "Eingabe fokussiert" anvisieren können, können Sie dies in einem Skript verwenden. Etwa so:

$('input').on("focus", function(){
   //do some stuff
});

Diese ist recht robust und erlaubt sogar die Verwendung der TAB-Taste.

Answer 5

Ich bin nicht ganz sicher, was Sie wollen, aber das klingt wie es erreicht werden kann, indem Sie den Zustand der Eingabe-Elemente (oder die div?) als eine Variable speichern:

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});