原生 不响应回车键是浏览器规范行为，需通过 keydown 监听 Enter 并校验合法性后手动派发 change 事件，注意兼容性与移动端差异。
date input 为什么回车没反应
原生 <input type="date"> 不响应回车键，这是浏览器的默认行为——它只接受鼠标点选或手动输入后失焦（blur）才触发 change 事件。回车在该控件中被完全忽略，不是 bug，是规范使然。
监听 keydown 捕获回车并手动触发 change
最直接的解法是在 keydown 事件里拦截 Enter，然后模拟一次“值已确认”的逻辑：检查输入是否符合日期格式、手动调用 dispatchEvent(new Event('change'))。注意不能只调 blur()，因为 Safari 和部分旧版 Chrome 中，空值或非法格式下 blur 不会触发 change。
实操建议：
- 用
event.key === 'Enter'判断，不要用keyCode（已废弃） - 先校验
input.value是否为合法 ISO 格式（如'2024-05-20'），避免无效回车触发错误逻辑 - 调用
input.dispatchEvent(new Event('change', { bubbles: true }))，显式声明bubbles保证事件能被父级监听到 - 最后加
event.preventDefault()阻止默认行为（比如表单提交）
input.addEventListener('keydown', e => {
if (e.key === 'Enter') {
if (input.checkValidity()) {
input.dispatchEvent(new Event('change', { bubbles: true }));
}
e.preventDefault();
}
});
兼容性与移动端注意事项
安卓 Chrome 和 iOS Safari 的原生 date picker 弹出后，软键盘通常不出现，也就没有回车键可按；此时该逻辑实际只影响桌面端或手动输入场景。但要注意：
立即学习“前端免费学习笔记（深入）”；
- iOS 16.4+ 在某些 WebView 中，
input.value可能在 picker 关闭后才更新，所以回车监听必须放在input元素上，不能依赖 picker 的关闭回调 - 如果用了第三方日期库（如 flatpickr、Pikaday），它们通常自带回车支持，无需额外处理 —— 但要确认其配置项如
allowInput或clickOpens是否开启 - 服务端仍需校验日期合法性，前端回车触发的
change不代表数据一定有效
替代方案：改用 text + pattern + 自定义验证
如果需要更强的控制力（比如支持模糊输入“20240520”自动转成“2024-05-20”，或允许回车即提交表单），可以退回到 <input type="text" pattern="\d{4}-\d{2}-\d{2}">，再配合 inputmode="numeric" 和 JS 格式化。这样回车天然可用，但失去原生 date picker 的交互优势。
关键点：
- 必须加
pattern和title提升可访问性与基础校验 - 用
input.addEventListener('input', formatToDate)实时标准化输入，避免用户输错后无法回车 - 移动端需测试
inputmode="numeric"是否真唤起数字键盘（部分安卓机型不支持）
真正难的不是让回车生效，而是让「用户觉得自然」——原生 date input 的交互预期和文本框完全不同，混用时容易引发困惑。
