в 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();
});
событие размытие: когда элемент теряет фокус.
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();
});