jQuery verliert den Fokus

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

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

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

So was:

$(selector).focusout(function () {
    //Your Code
});

Verwenden Sie "Unschärfe": http://docs.jquery.com/Events/blur#fn

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/

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