如何修改type=file输入框的回车行为，实现回车提交表单？

可以通过给file输入框添加键盘事件监听，拦截回车键的默认行为，同时手动触发表单提交，具体实现如下：

• 给input[type="file"]添加onKeyDown事件处理函数
• 在事件函数中判断是否按下回车键（可用e.key === 'Enter'或e.keyCode === 13判断）
• 如果是回车键，先调用e.preventDefault()阻止默认的文件选择弹窗，再手动触发表单提交

修改后的代码示例： #

// 假设你的表单有id为"uploadForm"，或通过React useRef获取表单DOM
<input 
  type="file" 
  className="form-control" 
  onChange={handleFile}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault(); // 阻止默认弹窗行为
      document.getElementById('uploadForm').submit(); // 手动提交表单
      // 若用React useRef：formRef.current.submit();
    }
  }}
/>

补充说明： #

• 若使用React类组件，可将事件逻辑抽为单独方法，核心逻辑一致
• 手动提交表单会正常触发表单绑定的onSubmit回调，不影响原有表单功能

内容的提问来源于stack exchange，提问作者Michael Horvilleur