jQuery失去焦点事件

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

Answer 1

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

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

Answer 2

喜欢这个：

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

Answer 3

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

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/

Answer 5

如果在关注字段之前将“酷选项”从视图中隐藏起来，那么您将希望在JQuery中创build此选项，而不是在DOM中创build此选项，以便任何使用屏幕阅读器的用户都不会看到不必要的信息。 为什么他们不得不听呢？

所以你可以像这样设置variables：

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