jQuery втрачає фокус подія

Я намагаюся показати контейнер, якщо поле введення отримує фокус, і - це актуальна проблема - приховати контейнер, якщо фокус втрачено. Чи є протилежна подія для фокусування jQuery?

Деякі приклади коду:

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

І я хотів би зробити щось подібне:

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

Використовуйте подію розмиття, щоб викликати свою функцію, коли елемент втрачає фокус:

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

Подобається це:

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

Використовуйте "blur": http://docs.jquery.com/Events/blur#fn

подія розмиття: коли елемент втрачає фокус.

подія фокусування: коли елемент або будь-який елемент всередині нього втрачає фокус.

Оскільки всередині фільтруючого елемента немає нічого, в цьому випадку працюватимуть розмиття та фокусування.

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

jsfiddle з розмиттям: http://jsfiddle.net/yznhb8pc/

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

jsfiddle з фокусуванням: http://jsfiddle.net/yznhb8pc/1/

Якщо "Класні параметри" приховані від подання, перш ніж поле зосереджене, ви хочете створити це в JQuery замість того, щоб мати його в DOM, щоб кожен, хто використовує зчитувач екрана, не побачив зайвої інформації. Чому вони повинні слухати його, коли ми не повинні бачити його?

Таким чином, ви можете налаштувати такі змінні:

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

а потім додайте (або додайте) фокус

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

а потім видаліть, коли фокус закінчиться

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