jQuery verliert den Fokus

253

Ich versuche, einen Container anzuzeigen, wenn ein Eingabefeld den Fokus erhält, und - das ist das eigentliche Problem - den Container auszublenden, wenn der Fokus verloren geht. Gibt es ein entgegengesetztes Ereignis für den Fokus von jQuery?

Ein Beispielcode:

<input type="text" value="" name="filter" id="filter"/>

<div id="options">some cool options</div>

<script type="text/javascript">
  $('#options').hide();

  $('#filter').focus(function() {
    $('#options').appear();
  });
</script>

Und was ich gerne machen würde, ist so etwas:

$('#filter').focus_lost(function() {
  $('#options').hide();
});
xijo
quelle

Antworten:

419

Verwenden Sie das Unschärfeereignis , um Ihre Funktion aufzurufen, wenn das Element den Fokus verliert:

$('#filter').blur(function() {
  $('#options').hide();
});
Canavar
quelle
3
Was ist, wenn der Browser wie Chrome das Textfeld automatisch ausfüllt? Ich glaube nicht, dass es die Unschärfe auslösen wird ()
Pita
40

So was:

$(selector).focusout(function () {
    //Your Code
});
SoftwareARM
quelle
10
Was ist der Unterschied dazu blur?
Cregox
5
Die Unschärfemethode wird verwendet, um den Fokus (dh nicht aktuell zu machen) des Objekts zu entfernen, zu dem es gehört. Wenn Sie einem Textfeld die Unschärfe geben, bewegt sich der Cursor zum nächsten Feld. Wenn Sie einem Fenster die Unschärfe geben, wird es hinter alle anderen verschoben. Dies ist kein reserviertes Wort, sodass Sie Ihre eigene Variable oder Funktion mit dem Namen "Unschärfe" deklarieren können. Wenn Sie dies jedoch tun, können Sie mit dieser Methode nicht steuern, welches Objekt aktuell ist.
SoftwareARM
2
Die Fokusmethode wird verwendet, um dem Fokus das Objekt zu geben (dh aktuell zu machen), zu dem er gehört. Wenn Sie einem Textfeld den Fokus geben, bewegt sich der Cursor auf dieses Feld. Wenn Sie einem Fenster den Fokus geben, wird es vor allen anderen verschoben. Aktionen, die kein bestimmtes Objekt angeben, das angewendet werden soll, um das Objekt zu verwenden, das den Fokus hat. Dies ist kein reserviertes Wort, sodass Sie Ihre eigene Variable oder Funktion mit dem Namen focus deklarieren können. Wenn Sie dies jedoch tun, können Sie mit dieser Methode nicht steuern, welches Objekt aktuell ist.
SoftwareARM
25
Die Erklärung von SoftwareARM ergab für mich beim ersten Lesen wenig Sinn, daher fand ich auf der Dokumentationsseite von jQuery ( api.jquery.com/focusout ) eine alternative Erklärung , die ich für andere hilfreich hielt: Das Focusout-Ereignis wird an ein Element gesendet wenn es oder irgendein Element darin den Fokus verliert. Dies unterscheidet sich vom Unschärfeereignis dadurch, dass es das Erkennen des Fokusverlusts von übergeordneten Elementen unterstützt (mit anderen Worten, es unterstützt das Sprudeln von Ereignissen).
Brad
12

Unschärfeereignis: Wenn das Element den Fokus verliert.

focusout-Ereignis: Wenn das Element oder ein Element darin den Fokus verliert.

Da sich im Filterelement nichts befindet, funktionieren in diesem Fall sowohl Unschärfe als auch Fokusausgabe.

$(function() {
  $('#filter').blur(function() {
    $('#options').hide();
  });
})

jsfiddle mit Unschärfe: http://jsfiddle.net/yznhb8pc/

$(function() {
  $('#filter').focusout(function() {
    $('#options').hide();
  });
})

jsfiddle mit focusout: http://jsfiddle.net/yznhb8pc/1/

Razan Paul
quelle
0

Wenn die 'Cool Options' vor dem Fokussieren des Felds in der Ansicht ausgeblendet sind, möchten Sie dies in JQuery erstellen, anstatt es im DOM zu haben, damit jeder, der einen Bildschirmleser verwendet, keine unnötigen Informationen sieht. Warum sollten sie es hören müssen, wenn wir es nicht sehen müssen?

So können Sie Variablen wie folgt einrichten:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

und dann den Fokus anhängen (oder voranstellen)

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

und dann entfernen, wenn der Fokus endet

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
Sprose
quelle