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

Question

我为自定义表单制作了一个日期选择器，我希望在输入丢失焦点时隐藏它，而下一个聚焦元素不是日期选择器（例如，当您关注另一个输入时）。问题是输入上的pip2 install matplotlib 事件发生在datepicker上的blur之前。这是JS事件的常规行为。但是我想只在输入失去焦点且日期选择器没有聚焦时才关闭日期选择器。有没有办法实现这一点而不使用focus或类似的东西阻止用户界面？

我不是要求代码解决方案，只是要遵循的流程或任何替代方案。感谢。

这是datepicker和输入的屏幕截图：

这是html代码，只是为了说明发生了什么（它混合了Angular绑定和模板引用）：

setTimeout()

Answer 1

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

• 在日历后面添加全屏透明叠加层
• 当用户点击该叠加层时（不在日历本身上），请关闭日历
• 当日历已打开时，请回复[Esc]等特定关键事件以关闭日历

希望有所帮助

Answer 2

我确实不明白你的需要......因为你想要做的事听起来像是bootstrap的正常行为的日期选择器。但是你提到了自定义表单 ......所以我不知道。

现在问题是blur输入和focus日期选择器下拉列表之间的延迟。

在这里，我会在下拉列表中讨论mouseup，因为focus更多地是关于输入而不是div。并且使用click并不起作用，因为该事件由datepicker使用，并且必须在某处返回false，因为它不会触发datepicker下拉列表。无论如何......你的setTimeout想法很容易实现。

诀窍：

1. 在输入blur上设置超时以隐藏下拉列表。
2. 在下拉列表中的mouseup上，清除超时。

通常，如果用户正在关注输入并点击打开的下拉列表，则介于两者之间的延迟大约为100毫秒。使用该值会导致3到4次失败一次。所以，让我们使用150毫秒。

以下是代码：

＆＃13;
＆＃13;
$("#date").datepicker();

var dp_timeout;
$(".datepicker-input").on("blur",function(){
  dp_timeout = setTimeout(function(){
    $(".datepicker").hide();
    console.log("Timeout executed");
  },150);
});

$(document).on("mouseup",".datepicker-dropdown",function(){
  clearTimeout(dp_timeout);
  console.log("Timeout canceled");
});
＆＃13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>

<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>
＆＃13;
＆＃13;
＆＃13;