原生 不响应回车键是浏览器规范行为，需通过 keydown 监听 Enter 并校验合法性后手动派发 change 事件，注意兼容性与移动端差异。
date input 为什么回车没反应
原生 不响应回车键，这是浏览器的默认行为——它只接受鼠标点选或手动输入后失焦（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”，或允许回车即提交表单），可以退回到 ，再配合 inputmode="numeric" 和 JS 格式化。这样回车天然可用，但失去原生 date picker 的交互优势。
关键点：
- 必须加
pattern和title提升可访问性与基础校验 - 用
input.addEventListener('input', formatToDate)实时标准化输入，避免用户输错后无法回车 - 移动端需测试
inputmode="numeric"是否真唤起数字键盘（部分安卓机型不支持）
真正难的不是让回车生效，而是让「用户觉得自然」——原生 date input 的交互预期和文本框完全不同，混用时容易引发困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
