日期类型input选中相同日期时onchange事件不触发的解决方案

浏览器原生的change事件触发规则是仅当输入控件的值发生变更时才会执行回调，选择与当前值相同的日期属于值未发生变化的场景，因此默认不会触发事件，这是符合W3C标准的设定。

下面提供两种可直接落地的实现方案：

方案1：点击事件配合历史值对比实现 #

该方案不会修改输入框的现有值展示，无视觉闪烁问题，兼容性适配所有主流浏览器：

示例代码 #

HTML

<div>点击相同日期也会触发回调</div>
<input type="date" value='2021-01-01' id="dateInput">

JS

const dateInput = document.getElementById('dateInput');
// 存储上一次选中的日期
let lastSelectedDate = dateInput.value;

// 原有回调函数
function dateChanged(elem) {
   alert('The value is: '+ elem.value);
}

// 监听change事件处理值变更的场景
dateInput.addEventListener('change', (e) => {
  dateChanged(e.target);
  lastSelectedDate = e.target.value;
});

// 监听点击事件处理值未变更的场景
dateInput.addEventListener('click', () => {
  // 等待日期选择器关闭后判断值是否和历史值一致
  setTimeout(() => {
    if (dateInput.value === lastSelectedDate) {
      dateChanged(dateInput);
    }
  }, 100);
});

方案2：点击时清空值强制触发change事件 #

该方案逻辑更简洁，没有定时器延迟问题，适合允许点击时输入框值短暂清空的场景：

示例代码 #

JS

const dateInput = document.getElementById('dateInput');
// 存储点击时的临时日期值
let tempDate = dateInput.value;

function dateChanged(elem) {
   alert('The value is: '+ elem.value);
}

dateInput.addEventListener('click', () => {
  // 点击时先保存当前值，再清空输入框
  tempDate = dateInput.value;
  dateInput.value = '';
});

dateInput.addEventListener('change', (e) => {
  // 用户取消选择时还原原有值
  if (!e.target.value) {
    e.target.value = tempDate;
  }
  dateChanged(e.target);
});

方案优缺点对比 #

• 方案1：无UI展示变化，兼容性强，适合对用户体验要求高的业务场景，需要注意定时器的延迟时间可根据实际设备表现调整
• 方案2：逻辑简单无冗余状态判断，不存在事件漏触发问题，仅存在毫秒级的输入框值清空视觉变化，普通场景下基本感知不到

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