Javascript jQuery失去焦点事件

我试图在输入字段获得焦点时显示一个容器，而实际的问题是在焦点丢失时隐藏容器。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').blur(function() {
  $('#options').hide();
});

使用“模糊”： 像这样：

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

---

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

聚焦输出事件：当元素或其中的任何元素失去焦点时

由于过滤器滤芯内没有任何东西，因此在这种情况下，模糊和聚焦都会起作用

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

jsfiddle与blur：

---

jsfiddle with focusout:

如果在聚焦字段之前，视图中隐藏了“酷选项”，那么您可能希望在JQuery中创建它，而不是在DOM中创建它，这样任何使用屏幕阅读器的人都不会看到不必要的信息。当我们不需要看的时候，他们为什么要听呢

因此，您可以这样设置变量：

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

然后在焦点结束时移除

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

---

这与模糊有什么区别？模糊方法用于移除所属对象的焦点（即使其成为非当前焦点）。如果给定一个文本字段，模糊会将光标移动到下一个字段。给一个窗口模糊将移动它后面的所有其他。这不是一个保留字，因此您可以声明自己的变量或名为blur的函数，但如果您这样做，您将无法使用此方法来控制哪个对象是当前对象。focus方法用于将它所属的对象作为焦点（即使其成为当前对象）。为文本字段指定焦点将光标移动到该字段。给予一个窗口焦点将使其在所有其他窗口之前移动。未指定要应用的特定对象以使用具有焦点的对象的操作。这不是一个保留字，因此您可以声明自己的变量或名为focus的函数，但如果您这样做，您将无法使用此方法控制哪个对象是当前对象。SoftwareARM的解释在我第一次阅读时没有太多意义，因此我在jQuery的文档页（）上找到了另一个解释我认为这会对其他人有所帮助：当某个元素或其中的任何元素失去焦点时，focusout事件会被发送到该元素。这与模糊事件不同，因为它支持检测父元素的焦点丢失（换句话说，它支持事件冒泡）。如果像chrome这样的浏览器自动填充文本框，我认为它不会触发模糊（）

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