jQuery失去焦点事件

Question

我想在输入框获得焦点时显示一个容器，而问题是在失去焦点时隐藏该容器。是否有与jQuery的focus相对应的事件？

以下是一些示例代码：

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

- xijo

Answer 1

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

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

- Canavar

---

如果像Chrome这样的浏览器自动填充文本框，我认为它不会触发blur()。 - pita

Answer 2

像这样：

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

- SoftwareARM

---

这个和“模糊”（blur）有什么不同？ - cregox

模糊方法用于取消其所属对象的焦点（即使其非当前状态）。将文本字段设置为模糊状态将把光标移动到下一个字段。将窗口设置为模糊状态将将其移到所有其他窗口后面。这不是保留字，因此您可以声明自己的变量或函数叫做“blur”，但如果您这样做，则无法使用此方法控制当前对象。 - SoftwareARM

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

起初我读了软件ARM的解释，感觉不太有意义，所以我在jQuery文档页面(http://api.jquery.com/focusout/)上找到了另一种解释，我认为这对其他人会有帮助：当元素或其内部任何元素失去焦点时，将向该元素发送focusout事件。这与模糊事件(blur event)不同，因为它支持检测来自父元素的失去焦点（换句话说，它支持事件冒泡）。 - Brad

Answer 3

使用"blur": http://docs.jquery.com/Events/blur#fn

- NVRAM

Answer 4

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

离焦事件：当元素或其内部任何元素失去焦点时。

由于过滤器元素中没有任何内容，因此在这种情况下都可以使用模糊事件和离焦事件。

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

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

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

jsfiddle上的焦点离开事件示例：http://jsfiddle.net/yznhb8pc/1/

- Razan Paul

Answer 5

如果在字段聚焦之前从视图中隐藏了“酷选项”，那么您将希望在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