HTML5 input type=date的input事件异常：空值时仍触发

算力阿峰

2026-5-19

解决Chrome 64原生Date输入框Input事件触发但值未同步的问题

嘿，这个问题我之前在处理旧版Chrome的原生日期控件时碰到过！Chrome 64这个版本的date输入框确实存在一个小bug，刚好就是你描述的这种场景——重置后键盘输入有效日期，切换月/日/年选项时input事件提前触发，但实际的value值还没同步更新，导致你拿到的是空值。

问题原因

本质上是这个旧版本Chrome的日期控件在处理用户交互时，UI更新和DOM的value属性同步存在时序差。当你切换日期的不同部分（比如从月切到日），浏览器会先触发input事件，但此时内部还没把用户输入的日期值写入到input的value属性里，所以你在事件回调里拿到的还是旧值或者空值。

解决方案

1. 给Input事件回调添加短延迟

这是最直接的规避方法，给回调加一个10ms左右的延迟，让浏览器有足够时间完成value的同步：

$('#pi-start').on('input', function() {
  // 加极短延迟，等待浏览器同步value值
  setTimeout(() => {
    const value = this.value; // 用原生this.value比jQuery.val()更直接可靠
    if (value !== '') {
      console.log(value);
    } else {
      console.log("Blank");
    }
  }, 10);
});

2. 结合Change事件补充检测

如果你需要更精准的有效值检测，可以同时监听change事件——它会在输入框失去焦点或者用户确认日期时触发，能稳定拿到最终的有效值，作为input事件的补充：

const handleDateUpdate = function() {
  const value = this.value;
  console.log(value ? value : "Blank");
};

// 带延迟的input事件监听实时变化
$('#pi-start').on('input', function() {
  setTimeout(handleDateUpdate.bind(this), 10);
})
// change事件确保拿到最终有效值
.on('change', handleDateUpdate);