Question

聊天应用。我想添加浏览聊天档案的功能。我有一个<input type="date" />；目的是使用户可以使用此input来指定他们要从哪一天看档案。

Firefox为<input type="date" />显示了一个不错的日历。当用户单击月份时，Firefox将显示月份和年份的列表供用户选择。现在，我当然只希望在用户完成日历编辑后才将请求发送到服务器。当用户仅单击输入并开始编辑日历时，将请求发送到服务器是错误的；当用户刚刚选择了一年零一个月，但还不是该月的一天时，发送请求也是错误的。

引发哪个事件应导致将请求发送到服务器？

我尝试过：

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

还有其他合适的活动吗？

Answer 1

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

回调函数的调用将被延迟，直到经过1500 ms（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>

附加到输入type =“ date”的事件会在用户停止编辑输入时触发吗？

1 个答案: