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

5 ответов


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

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

такой:

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

использовать "размытие": http://docs.jquery.com/Events/blur#fn


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

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

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

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