htmx中date输入框hx-trigger="change"频繁触发请求，如何实现正确提交？

针对date类型输入框使用hx-trigger="change"时频繁触发提交的问题，推荐以下两种实用方案：

方案一：使用blur事件触发提交 #

直接将触发事件改为blur，这样只有当用户点击输入框外部、焦点离开日期字段时，才会触发htmx的POST请求，完全符合预期行为：

<form hx-post="" hx-trigger="blur">
  <input type="date" value="2024-05-02" />
</form>

方案二：结合change与delay延迟提交 #

如果希望在用户修改日期后短暂延迟再提交（避免输入过程中误触发），可以给change事件添加延迟参数，比如设置500毫秒的延迟，用户停止输入半秒后才会发送请求：

<form hx-post="" hx-trigger="change delay:500ms">
  <input type="date" value="2024-05-02" />
</form>

说明 #

date类型输入框的change事件在标准HTML中确实会在用户修改日期的任意部分（日、月、年）时立即触发，这是浏览器的默认行为，并非htmx的问题。上述方案中，方案一最贴合「焦点离开时提交」的需求，推荐优先使用。

内容的提问来源于stack exchange，提问作者Werner Trelawney