javascript working Mit jQuery testen, ob eine Eingabe den Fokus hat




jquery trigger focus (12)

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?


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

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

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 ...


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;
        });
});

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 );

Soweit ich weiß, können Sie den Browser nicht fragen, ob eine Eingabe auf dem Bildschirm den Fokus hat, Sie müssen eine Art Fokus-Tracking einrichten.

Normalerweise habe ich eine Variable namens "noFocus" und setze sie auf "true". Dann füge ich allen Eingaben ein Fokus-Ereignis hinzu, das noFocus falsch macht. Dann füge ich allen Eingaben ein Unschärfeereignis hinzu, das noFocus wieder auf true setzt.

Ich habe eine MooTools-Klasse, die das recht einfach handhabt, ich bin sicher, dass Sie ein jquery-Plugin erstellen könnten, um das Gleiche zu tun.

Sobald dies erstellt wurde, können Sie NoFocus überprüfen, bevor Sie einen Rahmenwechsel durchführen.


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 falsche Positive wie den body herauszufiltern. Auf diese Weise werden alle Elemente außer Formularsteuerelemente und Hyperlinks herausgefiltert.

(Aus diesem Grund von Ben Alman .)


CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

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

Einfach

 <input type="text" /> 



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

    alert("I am in Focus");

     });
 </script>

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.



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





jquery-on