Bootstrap 4模态框内仅含隐藏输入的表单如何按回车提交？

我完全懂你要实现的效果：打开Bootstrap模态框后，不用点击任何可见按钮，直接按回车键就能提交那个只有隐藏输入和提交按钮的表单。下面是我亲测有效的解决方案，一步步来：

第一步：先把表单结构捋顺 #

哪怕元素都是隐藏的，表单的基础结构也得规范，不然提交逻辑容易出问题：

<!-- Bootstrap模态框 -->
<div class="modal fade" id="submitModal" tabindex="-1" aria-labelledby="submitModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <!-- 核心隐藏表单 -->
        <form id="hiddenSubmitForm" action="/your-submit-path" method="post">
          <input type="hidden" name="hiddenParam" value="your-custom-data">
          <button type="submit" id="hiddenSubmitBtn" style="display: none;"></button>
        </form>
        <!-- 模态框里的提示文案，告诉用户按回车提交 -->
        按下回车键即可完成提交
      </div>
    </div>
  </div>
</div>

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#submitModal">
  打开提交弹窗
</button>

第二步：绑定模态框显示后的焦点与回车事件 #

这里是关键！因为表单元素都是隐藏的，浏览器不会自动给它们分配焦点，所以我们得手动处理：

// 获取模态框和表单元素
const submitModal = document.getElementById('submitModal');
const hiddenForm = document.getElementById('hiddenSubmitForm');

// 监听模态框的「完全显示」事件（必须等模态框渲染完成再操作）
submitModal.addEventListener('shown.bs.modal', function () {
  // 给表单设置tabindex，让它能被聚焦（隐藏元素没法获焦，但表单本身可以）
  hiddenForm.setAttribute('tabindex', '-1');
  // 让表单获得焦点，这样键盘事件才能绑定在它身上生效
  hiddenForm.focus();

  // 绑定回车键监听
  hiddenForm.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault(); // 阻止默认回车行为，避免干扰
      hiddenForm.submit(); // 手动触发表单提交
    }
  });
});

// 模态框关闭时移除事件监听，防止重复绑定导致多次提交
submitModal.addEventListener('hidden.bs.modal', function () {
  hiddenForm.removeEventListener('keydown', function (e) {});
});

踩坑提醒 #

• 别在模态框初始化时就绑定事件：模态框是渐入显示的，提前绑定会因为元素还没完全渲染好，导致焦点设置无效或者事件不触发。
• 别给隐藏按钮设置焦点：display: none的元素无法获得焦点，所以得把焦点放在表单本身上（通过tabindex实现）。
• 一定要移除重复事件：如果模态框多次打开，重复绑定keydown事件会导致按一次回车触发多次提交，所以关闭时要清理事件监听。

如果之前尝试没成功，大概率是焦点设置不对或者事件绑定时机错了，按照上面的步骤调整应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者Matt Spinks