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

Haben Sie daran gedacht, die mouseOver y mouseOut um dies zu simulieren. Sehen Sie sich auch an MausEingabe y mouseLeave

Answer 2

Eine Alternative zur Verwendung von Klassen zur Kennzeichnung des Zustands eines Elements ist die interne Datenspeicherfunktionalität .

P.S.: Sie können Boolesche Werte und alles, was Sie wünschen, mit der Option data() Funktion. Es geht nicht nur um Zeichenketten :)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

Und dann geht es nur noch um den Zugriff auf den Zustand der Elemente.

Answer 3

Falls es jemanden interessiert, es gibt jetzt eine viel bessere Möglichkeit, den Fokus zu erfassen, $(foo).focus(...)

http://api.jquery.com/focus/

Answer 4

Behalten Sie beide Zustände (schwebend, fokussiert) als Wahr/Falsch-Flags im Auge, und führen Sie bei jeder Änderung eine Funktion aus, die den Rahmen entfernt, wenn beide falsch sind, und ansonsten den Rahmen anzeigt.

Also: onfocus setzt focused = true, onblur setzt focused = false. onmouseover setzt hovered = true, onmouseout setzt hovered = false. Nach jedem dieser Ereignisse führen Sie eine Funktion aus, die den Rahmen hinzufügt/entfernt.

Answer 5

Soweit ich weiß, kann man den Browser nicht fragen, ob eine beliebige Eingabe auf dem Bildschirm den Fokus hat, man muss eine Art Fokusverfolgung einrichten.

Ich habe in der Regel eine Variable namens "noFocus" und setze sie auf true. Dann füge ich ein Fokus-Ereignis zu allen Eingaben hinzu, das noFocus auf false setzt. Dann füge ich ein Unschärfe-Ereignis zu allen Eingaben hinzu, das noFocus wieder auf true setzt.

Ich habe eine MooTools-Klasse, die dies ganz einfach handhabt, ich bin sicher, Sie könnten ein Jquery-Plugin erstellen, um das gleiche zu tun.

Sobald das erstellt ist, können Sie noFocus überprüfen, bevor Sie den Rahmen austauschen.