Zdarzenie jQuery traci fokus

Próbuję wyświetlić kontener, jeśli pole wejściowe zostanie aktywowane i - to jest faktyczny problem - ukryj kontener, jeśli fokus zostanie utracony. Czy dla jQuery istnieje coś przeciwnego?

Przykładowy kod:

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

Chciałbym zrobić coś takiego:

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

Użyj zdarzenia rozmycia , aby wywołać funkcję, gdy element traci fokus:

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

Lubię to:

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

Użyj „rozmycia”: http://docs.jquery.com/Events/blur#fn

zdarzenie rozmycia: gdy element traci skupienie.

zdarzenie focusout: gdy element lub jakikolwiek element w nim traci skupienie.

Ponieważ wewnątrz elementu filtrującego nie ma nic, zarówno rozmycie, jak i fokus będą działać w tym przypadku.

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

jsfiddle z rozmyciem: http://jsfiddle.net/yznhb8pc/

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

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

Jeśli „Fajne opcje” są ukryte przed widokiem, zanim pole zostanie zogniskowane, powinieneś utworzyć to w JQuery zamiast mieć to w DOM, aby nikt korzystający z czytnika ekranu nie widział niepotrzebnych informacji. Dlaczego mieliby go słuchać, skoro nie musimy tego widzieć?

Możesz więc ustawić takie zmienne:

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

a następnie dodaj (lub dodaj) na fokus

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

a następnie usuń po zakończeniu fokusa

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