Auf der Startseite einer Site, die ich erstelle, verwenden einige <div>
die CSS :hover
-Pseudoklasse, um einen Rahmen hinzuzufügen, wenn sich die Maus darüber befindet. Eines der <div>
s enthält ein, <form>
das mit jQuery den Rand beibehält, wenn eine Eingabe darin den Fokus hat. Dies funktioniert einwandfrei, außer dass IE6 keine :hover
anderen Elemente als <a>
s unterstützt. Daher verwenden wir nur für diesen Browser jQuery, um CSS :hover
mithilfe der $(#element).hover()
Methode nachzuahmen . Das einzige Problem ist, dass jetzt, da jQuery sowohl das Formular verarbeitet focus()
als hover()
auch wenn eine Eingabe den Fokus hat, der Benutzer die Maus hinein und heraus bewegt, der Rand verschwindet.
Ich dachte, wir könnten eine Art Bedingung verwenden, um dieses Verhalten zu stoppen. Wenn wir beispielsweise mit der Maus testen, ob einer der Eingänge den Fokus hat, können wir verhindern, dass der Rand verschwindet. AFAIK, es gibt keinen :focus
Selektor in jQuery, daher bin ich mir nicht sicher, wie ich das erreichen soll. Irgendwelche Ideen?
quelle
Antworten:
jQuery 1.6+
jQuery hat einen
:focus
Selektor hinzugefügt, sodass wir ihn nicht mehr selbst hinzufügen müssen. Benutz einfach$("..").is(":focus")
jQuery 1.5 und niedriger
Bearbeiten: Wenn sich die Zeiten ändern, finden wir bessere Methoden zum Testen des Fokus. Der neue Favorit ist dieser Kern von Ben Alman :
Zitiert von Mathias Bynens hier :
Sie definieren einen neuen Selektor. Siehe Plugins / Authoring . Dann können Sie tun:
oder:
Jede jQuery
Wenn Sie nur herausfinden möchten, welches Element den Fokus hat, können Sie verwenden
Wenn Sie nicht sicher sind, ob die Version 1.6 oder niedriger sein wird, können Sie den
:focus
Selektor hinzufügen, wenn er fehlt:quelle
if (!jQuery.expr[':'].focus) { /* gist from Ben Alman */ }
?CSS:
JQuery:
quelle
Hier ist eine robustere Antwort als die derzeit akzeptierte:
Beachten Sie, dass der
(elem.type || elem.href)
Test hinzugefügt wurde, um falsch positive Ergebnisse wie herauszufilternbody
. Auf diese Weise stellen wir sicher, dass alle Elemente außer Formularsteuerelementen und Hyperlinks herausgefiltert werden.(Aus diesem Kern von Ben Alman entnommen .)
quelle
April 2015 Update
Da diese Frage schon eine Weile besteht und einige neue Konventionen ins Spiel gekommen sind, sollte ich das erwähnen
.live
Methode abgeschrieben wurde.An seiner Stelle die
.on
Methode eingeführt.Ihre Dokumentation ist sehr nützlich, um zu erklären, wie es funktioniert.
Damit Sie auf das Ereignis "Eingabeorientiert" abzielen können, können Sie dies in einem Skript verwenden. Etwas wie:
Dies ist ziemlich robust und ermöglicht es Ihnen sogar, die TAB-Taste zu verwenden.
quelle
Ich bin mir nicht ganz sicher, wonach Sie suchen, aber dies scheint zu erreichen, indem Sie den Status der Eingabeelemente (oder des div?) Als Variable speichern:
quelle
Eine Alternative zur Verwendung von Klassen zum Markieren des Status eines Elements ist die interne Datenspeicherfunktion .
PS: Mit der
data()
Funktion können Sie Boolesche Werte und alles, was Sie möchten, speichern . Es geht nicht nur um Strings :)Und dann geht es nur noch darum, auf den Zustand der Elemente zuzugreifen.
quelle
Wenn es jemanden interessiert, gibt es jetzt einen viel besseren Weg, um den Fokus zu erfassen.
$(foo).focus(...)
http://api.jquery.com/focus/
quelle
Haben Sie darüber nachgedacht, mouseOver und mouseOut zu verwenden, um dies zu simulieren ? Schauen Sie sich auch mouseEnter und mouseLeave an
quelle
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 Rand entfernt, wenn beide falsch sind, andernfalls den Rand anzeigt.
Also: Onfocus-Sets fokussiert = wahr, Onblur-Sets fokussiert = falsch. onmouseover setzt hovered = true, onmouseout setzt hovered = false. Führen Sie nach jedem dieser Ereignisse eine Funktion aus, mit der Rahmen hinzugefügt / entfernt werden.
quelle
Soweit ich weiß, können Sie den Browser nicht fragen, ob eine Eingabe auf dem Bildschirm den Fokus hat. Sie müssen eine Art Fokusverfolgung einrichten.
Normalerweise habe ich eine Variable namens "noFocus" und setze sie auf true. Dann füge ich allen Eingaben ein Fokusereignis hinzu, das noFocus falsch macht. Dann füge ich allen Eingaben, die noFocus auf true zurücksetzen, ein Unschärfeereignis hinzu.
Ich habe eine MooTools-Klasse, die dies recht einfach handhabt. Ich bin sicher, Sie könnten ein jquery-Plugin erstellen, um dasselbe zu tun.
Sobald dies erstellt wurde, können Sie noFocus überprüfen, bevor Sie einen Rahmenwechsel durchführen.
quelle
Es gibt kein: focus, aber es gibt: selected http://docs.jquery.com/Selectors/selected
Wenn Sie jedoch ändern möchten, wie die Dinge basierend auf der Auswahl aussehen, sollten Sie wahrscheinlich mit den Unschärfeereignissen arbeiten.
http://docs.jquery.com/Events/blur
quelle
Es gibt ein Plugin, mit dem überprüft werden kann, ob ein Element fokussiert ist: http://plugins.jquery.com/project/focused
quelle
Ich hatte ein .live-Ereignis ("Fokus") festgelegt, um den Inhalt einer Texteingabe auszuwählen () (hervorzuheben), damit der Benutzer ihn 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 verursacht hat, und die Auswahl des Inhalts wurde sofort aufgehoben, um den Cursor in das Textfeld zu setzen (funktionierte in FF meistens in Ordnung, in IE jedoch fehlgeschlagen).
Ich dachte, ich könnte das lösen, indem ich die Auswahl etwas verzögere ...
setTimeout (function () {$ (formObj) .select ();}, 200);
Dies funktionierte gut und die Auswahl blieb bestehen, aber es trat ein lustiges Problem auf. Wenn Sie von einem Feld zum nächsten wechseln, wechselt der Fokus zum nächsten Feld, bevor die Auswahl erfolgt. Da select den Fokus stiehlt, würde der Fokus zurückgehen und ein neues "Fokus" -Ereignis auslösen. Dies endete in einer Kaskade von Eingabeauswahlen, die über den gesamten Bildschirm tanzten.
Eine praktikable Lösung wäre, vor dem Ausführen von select () zu überprüfen, ob das Feld noch fokussiert ist. Wie bereits erwähnt, gibt es jedoch keine einfache Möglichkeit, dies zu überprüfen. Am Ende habe ich nur auf die gesamte automatische Hervorhebung verzichtet, anstatt das zu drehen, was sein sollte Ein einzelner Aufruf von jQuery select () ruft eine riesige Funktion auf, die mit Unterprogrammen beladen ist ...
quelle
Am Ende habe ich eine beliebige Klasse namens .elementhasfocus erstellt, die innerhalb der Funktion jQuery focus () hinzugefügt und entfernt wird. Wenn die Funktion hover () mit der Maus ausgeführt wird, wird nach .elementhasfocus gesucht:
Wenn diese Klasse nicht vorhanden ist (lesen Sie: Keine Elemente innerhalb des Div haben den Fokus), wird der Rand entfernt. Sonst passiert nichts.
quelle
Einfach
quelle