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

Ответы

Ответ 1

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

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

Ответ 2

Вот так:

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

Ответ 4

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

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

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

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

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

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

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

Ответ 5

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