jQuery 失去焦点事件

Question

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

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

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

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

$(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 中创建它，而不是在 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();
});

Answer 6

当通过 AJAX 加载元素时，使用 .on 函数

$.on('blur', '#filter', function ($event) {});