javascript - 任何附加到输入类型 ="date"的事件都会在用户停止编辑输入时触发？

Question

聊天应用。我想添加浏览聊天文件的功能。我有一个 <input type="date" /> ;目的是用户可以使用此 input指定他们希望从哪一天开始查看文件。

Firefox 为 <input type="date" /> 显示了一个漂亮的日历.当用户单击月份时，Firefox 会显示月份和年份列表供用户选择。现在我当然只想在用户编辑完日历后才向服务器发送请求。当用户点击输入并开始编辑日历时向服务器发送请求是错误的；当用户刚刚选择了年和月，但还没有选择这个月的某一天时，发送请求也是错误的。

触发哪个事件会导致向服务器发送请求？

我试过:

• onclick - 但当用户点击输入并开始编辑日历时触发，而不是在他们完成时触发；
• onsubmit - 但这根本不会触发；
• onchange和 oninput - 但当用户刚刚选择了一年和/或一个月，但还没有选择一天时，这也会触发；
• onblur - 但这需要用户明确地点击其他任何地方，并且当用户刚刚点击一天并且日历消失时不会触发。我认为这会让用户感到困惑

还有其他合适的事件吗？

Answer 1

我创建了一个片段，其中包含两个非常简单的示例，说明如何处理您的问题/请求。第一种方法针对已经建议的解决方案(在评论中)使用显式按钮。 第二种方法(我在评论中提到的方法)使用去抖动(特别是我使用了 Lodash debounce )。这种方法将按如下方式处理日期输入:

回调函数的调用将被延迟，直到在 1500 毫秒(1.5 秒)后没有检测到 change 事件。因此，如果用户停止更改日期值 1.5 秒，事件将得到处理，因此您将在控制台中看到一个日志(在您的情况下，您会将选定的值发送到服务器)。您可以根据需要调整延迟时间(最适合您的用例)并阅读我上面链接的文档。据我所知，要触发 change 最初，用户必须选择每个值(日、月、年)，因此用户只更改月、年或日的情况应该是也包括在内。

/* Version 1 */

document.getElementById('viewBtn').addEventListener('click', () => {
  const date = document.getElementById('date1').value
  console.log(date);
  // Send the request here
});

/* Version 2 (debouncing) */

document.getElementById('date2').addEventListener('change', _.debounce(event => {
  const date = event.target.value;
  console.log(date);
  // Send the request here
}, 1500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

<div>
  <h3>Version 1 (Explicit submit)</h3>
  <input id="date1" type="date" />
  <button id="viewBtn">View log</button>
</div>

<div>
  <h3>Version 2 (Debouncing)</h3>
  <input id="date2" type="date" />
</div>