html中默认不响应回车键，需手动监听keydown事件、阻止默认行为并调用input.click()；必须设tabindex="0"确保可聚焦，且不可依赖label包裹或dispatchevent，该方案兼容主流浏览器。
HTML 文件上传按钮默认不响应回车键
原生 <input type="file"> 元素在聚焦状态下按回车，浏览器不会触发文件选择对话框——这是规范行为，不是 bug。它只响应鼠标点击或空格键（部分浏览器），但明确不处理回车（Enter）。想用回车触发，必须手动接管事件。
用 JavaScript 拦截 Enter 并调用 click()
核心思路：监听 keydown 事件，检测到 Enter 时主动调用文件输入框的 click() 方法。注意不能用 submit 或模拟表单提交，因为文件输入本身不参与 submit 行为。
实操要点：
- 绑定事件的目标必须是可聚焦的元素，推荐直接绑定在
<input type="file">上（需加tabindex="0"确保能获得焦点） - 必须调用
.click()，不能用.dispatchEvent(new Event('click'))—— 后者无法触发原生文件选择器（安全限制） - 需阻止默认行为，避免回车在某些上下文中触发表单提交或换行
<input type="file" id="uploader" tabindex="0"><script>
const input = document.getElementById('uploader');
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
input.click(); // ✅ 唯一可靠方式
}
});
</script>
为什么不能用 label 包裹 + 回车？
很多人尝试把 <input type="file"> 放进 <label></label> 并给 label 设置 tabindex，期望回车触发 label 的 click 行为进而激活 input。但实际中：
- label 的 click 不会穿透触发隐藏 file input 的选择器（尤其当 input 被 CSS 隐藏或 opacity:0 时）
- 即使 label 可点击，其 click 事件也不等价于对 input 本身的
click()调用 - 部分浏览器（如 Safari）对 label 关联的 file input 的键盘支持极弱，回车完全无响应
所以绕过 label，直接操作 input 元素是最稳定路径。
兼容性与无障碍注意事项
该方案在 Chrome、Firefox、Edge、Safari（≥16.4）均有效，但要注意：
- 必须确保 input 是可聚焦的（
tabindex="0"或本身可 tab 到，比如没被disabled或display:none） - 不要在
focus事件里自动click()—— 这会破坏屏幕阅读器用户的操作流，且部分浏览器会静默拒绝 - 如果页面有多个 file input，每个都需独立绑定，避免事件冒泡误触发
- 移动端 Safari 对键盘事件支持有限，物理键盘连接 iPad 时才可能触发；纯触摸设备无意义
真正容易被忽略的是：回车触发后用户选完文件，change 事件照常触发，但焦点不会自动回到 input 上——如果后续逻辑依赖焦点状态（比如自动提交），得手动 input.focus()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
