javascript - working - jquery trigger focus




Mit jQuery testen, ob eine Eingabe den Fokus hat (10)

Auf der Startseite einer Site, die ich erstelle, verwenden mehrere <div> s die CSS :hover Pseudo-Klasse, um einen Rahmen hinzuzufügen, wenn sich die Maus über ihnen befindet. Eines der <div> s enthält eine <form> die mit jQuery den Rahmen behält, wenn eine Eingabe darin den Fokus hat. Dies funktioniert perfekt, außer IE6 unterstützt nicht :hover über andere Elemente als <a> s. Für diesen Browser verwenden wir also nur jQuery, um CSS nachzuahmen :hover mit der Methode $(#element).hover() . Das einzige Problem ist jetzt, dass jQuery sowohl den form focus() als auch den hover() . Wenn eine Eingabe den Fokus hat, bewegt der Benutzer die Maus hinein und heraus, der Rand verschwindet.

Ich dachte, wir könnten eine Art Konditional verwenden, um dieses Verhalten zu stoppen. Wenn wir zum Beispiel mit der Maus testen würden, ob einer der Eingänge den Fokus hätte, könnten wir verhindern, dass die Grenze verschwindet. AFAIK, es gibt keinen :focus Selektor in jQuery, also bin ich mir nicht sicher, wie ich das erreichen kann. Irgendwelche Ideen?


April 2015 Aktualisierung

Da diese Frage seit einiger Zeit besteht und einige neue Konventionen ins Spiel gebracht wurden, sollte ich erwähnen, dass die .live Methode abgeschrieben wurde.

.on wurde die .on Methode eingeführt.

Ihre documentation ist sehr nützlich, um zu erklären, wie es funktioniert;

Die .on () -Methode hängt Ereignishandler an die aktuell ausgewählte Gruppe von Elementen im jQuery-Objekt an. Ab jQuery 1.7 bietet die .on () -Methode alle Funktionen, die zum Anhängen von Ereignishandlern erforderlich sind. Informationen zur Konvertierung von älteren jQuery-Ereignismethoden finden Sie unter .bind (), .delegate () und .live ().

Damit Sie das Ereignis "Eingabe fokussiert" gezielt ansteuern können, können Sie dies in einem Skript verwenden. Etwas wie:

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

Dies ist ziemlich robust und ermöglicht Ihnen sogar die Verwendung der TAB-Taste.


jQuery 1.6+

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

jQuery 1.5 und niedriger

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

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

Zitiert von Mathias Bynens here :

Beachten Sie, dass der Test (elem.type || elem.href) hinzugefügt wurde, um falsche Positive wie den Körper herauszufiltern. Auf diese Weise werden alle Elemente außer Formularsteuerelemente und Hyperlinks herausgefiltert.

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

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

oder:

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

Irgendein jQuery

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

$(document.activeElement)

Wenn Sie nicht sicher sind, ob die Version 1.6 oder niedriger ist, können Sie den :focus Selektor hinzufügen, wenn dieser fehlt:

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

Eine Alternative zur Verwendung von Klassen zum Markieren des Status eines Elements ist die interne Datenspeicherfunktionalität .

PS: Mit der Funktion data() können Sie boolesche Werte speichern und alles, was Sie möchten. Es geht nicht nur um Saiten :)

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

Und dann geht es nur darum, auf den Zustand der Elemente zuzugreifen.


Einfach

 <input type="text" /> 



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

    alert("I am in Focus");

     });
 </script>


Haben Sie darüber nachgedacht, mouseOver und mouseOut zu verwenden, um dies zu simulieren ? Schauen Sie auch in mouseEnter und mouseLeave


Ich bin mir nicht ganz sicher, was Sie suchen, aber das klingt, als könnte es erreicht werden, indem Sie den Zustand der Eingabeelemente (oder des div?) Als 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;
        });
});

Ich hatte ein .Live ("Fokus") -Ereignis gesetzt, um den Inhalt einer Texteingabe auszuwählen () (hervorzuheben), so dass der Benutzer sie nicht auswählen müsste, bevor er einen neuen Wert eintippt.

$ (formObj) .select ();

Aufgrund von Macken zwischen verschiedenen Browsern wurde die Auswahl manchmal durch den Klick ersetzt, der sie verursacht hat, und sie würde den Inhalt sofort danach zugunsten des Platzierens des Cursors innerhalb des Textfelds abwählen (funktionierte in FF größtenteils ok, aber in IE fehlgeschlagen)

Ich dachte, ich könnte das lösen, indem ich eine kleine Verzögerung auf die Auswahl stelle ...

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

Dies funktionierte gut und die Auswahl würde bestehen bleiben, aber ein lustiges Problem entstand. Wenn Sie von einem Feld zum nächsten springen, würde der Fokus auf das nächste Feld wechseln, bevor die Auswahl stattfand. Da der Fokus ausgewählt wird, würde der Fokus zurückgehen und ein neues "Fokus" -Ereignis auslösen. Dies endete in einer Kaskade von Inputs, die über den gesamten Bildschirm tanzten.

Eine praktikable Lösung wäre, zu überprüfen, ob das Feld noch scharf ist, bevor man select () ausführt, aber wie bereits erwähnt, gibt es keine einfache Möglichkeit, dies zu überprüfen. Ich habe damit auf die gesamte Auto-Hervorhebung verzichtet und nicht gedreht ein einzelner jQuery select () Aufruf in eine riesige Funktion mit Subroutinen beladen ...


Verfolgen Sie beide Status (schwebend, fokussiert) als Wahr / Falsch-Flags, und wenn Sie Änderungen vornehmen, führen Sie eine Funktion aus, die den Rahmen entfernt, wenn beide falsch sind, andernfalls wird der Rahmen angezeigt.

Also: onfocus setzt fokussiert = wahr, onblur setzt fokussiert = falsch. onmouseover setzt hovered = true, onmouseout setzt hovered = false. Führen Sie nach jedem dieser Ereignisse eine Funktion aus, die den Rahmen hinzufügt / entfernt.


Was ich gemacht habe, ist eine willkürliche Klasse namens .elementhasfocus zu erstellen, die innerhalb der Funktion jQuery focus () hinzugefügt und entfernt wird. Wenn die Funktion hover () bei mouse out ausgeführt wird, wird nach "elementhasfocus" gesucht:

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

Also, wenn es diese Klasse nicht hat (lese: keine Elemente innerhalb des div haben den Fokus), wird der Rahmen entfernt. Sonst passiert nichts.





jquery-on