JQuery потерять фокус событие

Question

Я пытаюсь показать контейнер, если поле ввода получает фокус и - это реальная проблема - скрыть контейнер, если фокус потерян. Есть ли противоположное событие для фокуса 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();
});

Answer 1

Используйте событие blur для вызова вашей функции, когда элемент теряет фокус:

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

Answer 2

Как это:

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

Answer 3

Используйте «размытие»: http://docs.jquery.com/Events/blur#fn

Answer 4

событие размытия: когда элемент теряет фокус.

событие фокуса: когда элемент или любой элемент внутри него теряет фокус.

Поскольку внутри фильтрующего элемента ничего нет, в этом случае будут работать как размытие, так и фокусировка.

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

jsfiddle with blur: http://jsfiddle.net/yznhb8pc/

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

jsfiddle с фокусировкой: http://jsfiddle.net/yznhb8pc/1/

Answer 5

Если «крутые параметры» скрыты от вида до того, как поле будет сфокусировано, то вы захотите создать его в 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();
});