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();
});
271565 次浏览
小开
最佳答案

当元素失去焦点时，使用模糊事件调用函数:

$('#filter').blur(function() {
$('#options').hide();
});
小开
< p >使用“模糊”: http://docs.jquery.com/Events/blur#fn < / p >
小开

是这样的:

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

当元素失去焦点时模糊事件:。

focusout事件:当元素或其中的任何元素失去焦点时。

由于滤镜元素内部什么都没有，在这种情况下，模糊和聚焦都可以工作。

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

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

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

jsfiddle使用focusout: http://jsfiddle.net/yznhb8pc/1/

小开

如果“Cool Options”在字段聚焦之前从视图中隐藏，那么你会希望在JQuery中创建它，而不是在DOM中，这样任何使用屏幕阅读器的人都不会看到不必要的信息。为什么他们要听而我们却不需要看呢?

你可以像这样设置变量:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

然后在焦点上追加(或prepend)

$("input[name='input_name']").focus(function() {
$(this).append($coolOptions);
});

当焦点结束时再移除

$("input[name='input_name']").focusout(function() {
$('#options').remove();
});

提交答案