如何在不使用onChange()的情况下，强制HTML日期选择器选值后失焦？

这问题本质是多数第三方日历组件的交互逻辑不会触发输入框的blur事件——要么是日历弹窗自己抓着焦点，选完直接关闭没把焦点还给输入框；要么是组件内部更新值时，压根没触发输入框的失焦行为。给你几个可行的解决办法：

• 绑定日历组件的专属选择完成事件
  几乎所有成熟的日历组件（比如Element UI DatePicker、AntD DatePicker）都会提供日期选完后的回调事件，比如onChange、onSelect这类。直接把你的保存函数绑到这个事件上，同时保留输入框的onblur处理其他手动输入场景。举个例子：

  // React + AntD 场景
  <DatePicker onChange={(date) => {
    setSelectedDate(date);
    handleSave(); // 调用保存函数
  }} />
  // 普通输入框依然用blur
  <input type="text" onblur={handleSave} value={inputContent} />
  

• 手动触发输入框的blur事件
  如果没法直接用组件的内置事件，就在日历选择完成的回调里，手动找到对应的输入框DOM，调用blur()方法强制触发。比如：

  // 假设日历选择后的回调是onDateSelected
  function onDateSelected(dateStr) {
    const dateInput = document.getElementById('user-date-input');
    dateInput.value = dateStr;
    dateInput.blur(); // 手动触发blur，触发保存
  }
  

• 用focusout替代blur
blur事件不冒泡，但focusout是冒泡的。如果日历组件是输入框的子元素，当焦点从日历组件移开时，focusout会冒泡到输入框上，从而触发保存逻辑。把原来的onblur换成onfocusout就行：

  document.querySelector('.input-with-calendar').addEventListener('focusout', handleSave);
  

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