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

Es gibt keinen :focus, aber es gibt :selected http://docs.jquery.com/Selectors/selected

aber wenn Sie das Aussehen von ausgewählten Objekten ändern möchten, sollten Sie wahrscheinlich mit den Weichzeichner-Ereignissen arbeiten.

http://docs.jquery.com/Events/blur

Answer 2

Was ich gewickelt zu tun ist die Erstellung einer beliebigen Klasse namens .elementhasfocus, die hinzugefügt wird und innerhalb der jQuery focus() Funktion entfernt. Wenn die hover()-Funktion läuft auf Maus aus, es überprüft für .elementhasfocus:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

Wenn es diese Klasse nicht hat (d. h. kein Element innerhalb des Divs hat den Fokus), wird der Rahmen entfernt. Andernfalls passiert nichts.

Answer 3

Es gibt ein Plugin, das überprüft, ob ein Element fokussiert ist: http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

Answer 4

Ich hatte ein .live("focus")-Ereignis so eingestellt, dass es den Inhalt einer Texteingabe auswählt() (hervorhebt), damit der Benutzer sie nicht auswählen muss, bevor er einen neuen Wert eingibt.

$(formObj).select();

Aufgrund von Macken zwischen verschiedenen Browsern wurde die Auswahl manchmal durch den Klick ersetzt, der sie verursachte, und der Inhalt wurde direkt danach zugunsten der Platzierung des Cursors im Textfeld abgewählt (funktionierte in FF meistens gut, aber im IE nicht)

Ich dachte, ich könnte das Problem lösen, indem ich eine leichte Verzögerung bei der Auswahl einführe...

setTimeout(function(){$(formObj).select();},200);

Dies funktionierte gut und die Auswahl blieb bestehen, aber es trat ein seltsames Problem auf. Wenn Sie mit der Tabulatortaste von einem Feld zum nächsten wechselten, wechselte der Fokus zum nächsten Feld, bevor die Auswahl stattfand. Da die Auswahl den Fokus stiehlt, würde der Fokus dann zurückgehen und ein neues "Fokus"-Ereignis auslösen. Dies endete in einer Kaskade von Eingabeauswahlen, die über den ganzen Bildschirm tanzten.

Eine praktikable Lösung wäre zu prüfen, ob das Feld noch den Fokus hat, bevor die select() ausgeführt wird, aber wie bereits erwähnt, gibt es keine einfache Möglichkeit zu überprüfen... Am Ende verzichtete ich einfach auf die ganze automatische Hervorhebung, anstatt das, was ein einzelner jQuery select()-Aufruf sein sollte, in eine riesige Funktion mit vielen Unterprogrammen zu verwandeln...

Answer 5

Einfach

 <input type="text" /> 

 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>