jQuery失去焦点事件

Posted 2023-02-19

【中文标题】jQuery失去焦点事件

【英文标题】：jQuery lose focus event

【发布时间】：2010-11-28 06:09:29

【问题描述】：

如果输入字段获得焦点，我会尝试显示一个容器，并且 - 这是实际问题 - 如果焦点丢失，则隐藏容器。 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();
);

【参考方案1】：

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

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

【讨论】：

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

【参考方案2】：

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

【参考方案3】：

像这样：

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

【讨论】：

这和blur有什么区别？

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

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

SoftwareARM 的解释在第一次阅读时对我来说没有多大意义，所以我在 jQuery 的文档页面 (api.jquery.com/focusout) 上找到了一个我认为对其他人有帮助的替代解释：focusout 事件是当元素或其中的任何元素失去焦点时发送到该元素。这与 blur 事件不同，它支持检测父元素失去焦点（换句话说，它支持事件冒泡）。

【参考方案4】：

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

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

由于滤镜元素内部没有任何内容，因此在这种情况下，blur 和 focusout 都将起作用。

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

jsfiddle 模糊：http://jsfiddle.net/yznhb8pc/

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

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

【参考方案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();
);