javascript - Verwenden von jQuery, um zu testen, ob ein Eingabefeld den Fokus hat

Auf der Startseite einer Website, die ich erstelle, verwenden mehrere <div>-Elemente die CSS-:hover-Pseudo-Klasse, um einen Rahmen hinzuzufügen, wenn sich die Maus darüber befindet. Einer der <div>s enthält ein <form>, das mithilfe von jQuery den Rahmen beibehält, wenn ein Eingabefeld darin den Fokus hat. Das funktioniert einwandfrei, außer dass IE6 :hover nur für <a>-Elemente unterstützt. Deshalb verwenden wir für diesen Browser jQuery, um :hover mit der $(#element).hover()-Methode nachzuahmen. Das einzige Problem ist, dass nun, da jQuery sowohl das Fokus-focus() als auch das hover() für das Formular behandelt, wenn ein Eingabefeld den Fokus hat und der Benutzer die Maus hinein und heraus bewegt, der Rahmen verschwindet.

Ich dachte, wir könnten eine Art Bedingung verwenden, um dieses Verhalten zu stoppen. Zum Beispiel, wenn wir bei Mouseout prüfen würden, ob eines der Eingabefelder den Fokus hat, könnten wir verhindern, dass der Rahmen verschwindet. Soweit ich weiß, gibt es keinen :focus-Selektor in jQuery, also bin ich mir nicht sicher, wie man das erreichen kann. Irgendeine Idee?

Antwort #1

jQuery 1.6+

jQuery hat einen :focus-Selektor hinzugefügt, sodass wir ihn nicht mehr selbst hinzufügen müssen. Verwenden Sie einfach $("..").is(":focus")

jQuery 1.5 und darunter

Bearbeiten: Mit der Zeit ändern sich die Methoden, um die Konzentration zu testen, der neue Favorit ist dieses Gist von Ben Alman:

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

Hier zitiert von Mathias Bynens:

Beachten Sie, dass der Test (elem.type || elem.href) hinzugefügt wurde, um Fehlalarme 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 Folgendes tun:

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

oder :

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

Jedes jQuery

Wenn Sie nur herausfinden möchten, welches Element den Fokus hat, können Sie verwenden

$(document.activeElement)

Wenn Sie sich nicht sicher sind, ob die Version 1.6 oder niedriger sein wird, können Sie den :focus-Selektor hinzufügen, falls er fehlt:

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

Antwort #2

CSS :

.focus {
    border-color:red;
}

JQuery :

  $(document).ready(function() {

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

Antwort #3

Hier ist eine robustere Antwort als die derzeit akzeptierte:

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

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

(Entnommen aus diesem Gist von Ben Alman.)

Antwort #4

April 2015 Aktualisierung

Da diese Frage schon seit einiger Zeit besteht und einige neue Konventionen in Kraft getreten sind, halte ich es für notwendig zu erwähnen, dass die .live-Methode veraltet ist.

An seiner Stelle wurde jetzt die .on-Methode eingeführt.

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

Die .on()-Methode fügt den derzeit ausgewählten Elementen im jQuery-Objekt Ereignis-Handler hinzu. Seit jQuery 1.7 bietet die .on()-Methode alle erforderlichen Funktionen zum Anhängen von Ereignis-Handlern. Hilfe bei der Umstellung von älteren jQuery-Ereignismethoden findet man unter .bind(), .delegate() und .live().

Also, damit Sie das 'eingabe-fokussierte' Ereignis anvisieren können, können Sie dies in einem Skript verwenden. So etwas wie:

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

Das ist ziemlich robust und erlaubt es Ihnen sogar, die TAB-Taste zu verwenden.