使用JavaScript隐藏失去焦点的html元素

我为自定义表单创建了一个日期选择器，我想在输入失去焦点且下一个焦点元素不是日期选择器时隐藏它（例如，当您聚焦另一个输入时）。问题在于，输入上的

模糊

事件发生在日期选择器上的

焦点

之前。这是JS事件的常规行为。但是我只想在输入失去焦点并且日期选择器没有焦点时关闭日期选择器。使用

setTimeout（）

或类似工具，有没有办法在不阻塞用户界面的情况下实现这一点

我不是在要求一个代码解决方案，而是要遵循的过程或任何替代方案。谢谢

这是日期选择器和输入的屏幕截图：

这是一段html代码，只是想了解一下发生了什么（它混合了角度绑定和模板引用）：

德国福查

我将日期选择器视为弹出窗口：

• 在日历后面添加全屏透明覆盖
• 当用户单击该覆盖（而不是日历本身）时，关闭日历
• 日历打开时，响应特定的关键事件，如

  [Esc]

  关闭日历

---

希望这能帮上忙我不太明白你的需要。。。因为你想做的事情听起来像是bootstrap的日期选择器的正常行为。但是你提到了一个自定义表单。。。所以我不知道

现在的问题是关于

blur

输入和

focus

日期选择器下拉菜单之间的延迟

在这里，我将在下拉列表中讨论

mouseup

，因为

focus

更多的是关于输入而不是div。使用

单击
是不起作用的，因为该事件由日期选择器使用，并且必须在某个地方返回false，因为它不会在日期选择器下拉列表中触发。无论如何你的
setTimeout
想法很容易实现

诀窍：

设置输入时的超时
blur
以隐藏下拉列表
在下拉菜单上的
mouseup
上，清除该超时
通常，如果用户聚焦输入并单击打开的下拉列表，则两者之间的延迟约为100ms。使用该值会导致3~4次失败一次。那么让我们使用150毫秒

代码如下：


$（“#日期”）.datepicker（）；
var-dp_超时；
$（“.datepicker输入”）.on（“模糊”，函数（）{
dp_timeout=setTimeout（函数（）{
$（“.datepicker”）.hide（）；
log（“执行超时”）；
},150);
});
$（document）.on（“mouseup”，“.datepicker下拉列表”，function（）{
clearTimeout（dp_超时）；
日志（“超时已取消”）；
});

德国福查
嗨！是的，在第一种方法中，我就是这样做的。但是当用户按下tab键，焦点转到下一个输入时，例如日历仍然打开，我想关闭它。在这种情况下，
blur
事件应该可以工作。整个要点是让您拥有日期选择器的打开-关闭状态的所有权。DOM本身恐怕没有简单的内置解决方案。问题是，当您在单击输入打开日期后单击日期选择器选择日期时，输入模糊，然后日期选择器关闭…然后您可以收听tab键事件并关闭它Yes，但是如果您单击另一个输入而不是使用tab键，它将无法工作
<div class="col-lg-2 form-group">
    <label for="date">Fecha</label>
    <input type="text"
           class="form-control datepicker-input"
           id="date"
           placeholder="Fecha"
           readonly="true"
           formControlName="date"
           #datepickerInput>
    <app-datepicker [datepickerInput]="datepickerInput"
                    (pickDate)="onPickDate($event)"></app-datepicker>
</div>