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

— 西条
source

419

当元素失去焦点时，使用blur事件调用您的函数：

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

— 卡纳瓦
source

3

如果像chrome这样的浏览器会自动填充文本框，该怎么办？我认为它不会触发blur（）

— pita

40

像这样：

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

— 软件ARM
source

10

这和有什么区别blur？

— cregox 2011年

5

模糊方法用于移除焦点（即使其成为非当前对象）所属的对象。使文本字段模糊，将光标移至下一个字段。给窗口一个模糊将使其移到所有其他窗口的后面。这不是保留字，因此您可以声明自己的名为blur的变量或函数，但是如果这样做，则将无法使用此方法来控制哪个对象是当前的。

— SoftwareARM

2

focus方法用于为焦点（即，使其成为当前对象）所属的对象。为文本字段指定焦点会将光标移动到该字段。给窗口一个焦点会将其移到所有其他窗口的前面。未指定要应用的特定对象的操作将使用具有焦点的对象。这不是保留字，因此您可以声明自己的名为focus的变量或函数，但是如果这样做，则将无法使用此方法来控制哪个对象是当前的。

— SoftwareARM

25

初读时，SoftwareARM的解释对我来说并没有多大意义，因此我在jQuery的文档页面（api.jquery.com/focusout）上找到了另一种解释，我认为这对其他人会有所帮助：focusout事件发送到一个元素当它或其中的任何元素失去焦点时。这与模糊事件不同，因为它支持检测父元素失去焦点（换句话说，它支持事件冒泡）。

— 布拉德（Brad）

33

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

— NVRAM
source

12

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

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

由于滤镜内部没有任何东西，因此在这种情况下，模糊和聚焦都将起作用。

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

带有模糊效果的jsfiddle：http： //jsfiddle.net/yznhb8pc/

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

具有焦点的jsfiddle：http : //jsfiddle.net/yznhb8pc/1/

— 拉赞·保罗
source

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

— 散布
source