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

当前回答

当元素失去焦点时,使用blur事件调用函数:

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

其他回答

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

当元素失去焦点时,使用blur事件调用函数:

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

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

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

由于滤镜元素内部什么都没有,在这种情况下,模糊和聚焦都可以工作。

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

Jsfiddle with blur: http://jsfiddle.net/yznhb8pc/

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

使用focusout的Jsfiddle: http://jsfiddle.net/yznhb8pc/1/

是这样的:

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

如果“Cool Options”在字段聚焦之前从视图中隐藏,那么你会希望在JQuery中创建它,而不是在DOM中,这样任何使用屏幕阅读器的人都不会看到不必要的信息。为什么他们要听而我们却不需要看呢?

你可以像这样设置变量:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

然后在焦点上追加(或prepend)

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

当焦点结束时再移除

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});