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

253

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

Ответы:

419

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

$('#filter').blur(function() {
  $('#options').hide();
});
Canavar
источник
3
Что, если браузер, такой как Chrome, автоматически заполняет текстовое поле, я не думаю, что это вызовет размытие ()
pita
40

Как это: 

$(selector).focusout(function () {
    //Your Code
});
SoftwareARM
источник
10
какая разница от этого до blur?
Cregox
5
Метод размытия используется для удаления фокуса (т.е. сделать не текущим) объекта, которому он принадлежит. Задав текстовое поле, размытие переместит курсор в следующее поле. Если дать окну размытие, то оно переместится за все остальные. Это не зарезервированное слово, поэтому вы можете объявить свою собственную переменную или функцию с именем blur, но если вы это сделаете, вы не сможете использовать этот метод для контроля того, какой объект является текущим.
SoftwareARM
2
Метод focus используется, чтобы дать фокус (то есть сделать текущий) объект, которому он принадлежит. При выделении текстового поля курсор переместится в это поле. Если окно будет сфокусировано, оно будет перемещено впереди всех остальных. Действия, которые не указывают конкретный объект, который нужно применить, чтобы использовать тот, который имеет фокус. Это не зарезервированное слово, поэтому вы можете объявить свою собственную переменную или функцию с именем focus, но если вы это сделаете, вы не сможете использовать этот метод для управления текущим объектом.
SoftwareARM
25
Объяснение SoftwareARM не имело для меня большого смысла при первом прочтении, поэтому я нашел альтернативное объяснение на странице документации jQuery ( api.jquery.com/focusout ), которое, по моему мнению, было бы полезно для других: событие focusout отправляется элементу когда он или какой-либо элемент внутри него теряет фокус. Это отличается от события размытия тем, что оно поддерживает обнаружение потери фокуса от родительских элементов (другими словами, оно поддерживает всплытие событий).
Брэд
12

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

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

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

$(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/

Разан Пол
источник
0

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