jQuery失去焦点事件

时间:2009-09-14 19:53:43

标签: javascript jquery javascript-events focus

如果输入字段获得焦点,我正在尝试显示容器 - 这是实际问题 - 如果焦点丢失则隐藏容器。是否存在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 个答案:

答案 0 :(得分:407)

当元素失去焦点时,使用blur事件来调用函数:

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

答案 1 :(得分:40)

像这样:

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

答案 2 :(得分:33)

使用“模糊”:  http://docs.jquery.com/Events/blur#fn

答案 3 :(得分:7)

当元素失去焦点时,

模糊事件

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

由于滤镜元素内部没有任何内容,因此在这种情况下,模糊和聚焦都会起作用。

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

答案 4 :(得分:0)

如果在关注字段之前隐藏了“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();
});