如何在Bootstrap和Angular中按回车键关闭表单模态框并提交

核心问题是回车键触发了表单的默认提交行为，导致页面逻辑被中断，模态框关闭代码没来得及执行。以下是不同场景下的解决方案：

原生 JavaScript 实现 #

给输入框绑定回车事件，先阻止默认提交，再手动执行提交和关闭逻辑：

<!-- 模态框与表单结构 -->
<div id="modalContainer" style="display:block;">
  <form id="targetForm">
    <input type="text" id="inputBox">
    <button type="button" id="submitBtn">提交</button>
  </form>
</div>

<script>
const input = document.getElementById('inputBox');
const form = document.getElementById('targetForm');
const modal = document.getElementById('modalContainer');
const submitBtn = document.getElementById('submitBtn');

// 按钮点击逻辑（保留原有功能）
submitBtn.addEventListener('click', handleSubmit);

// 输入框回车监听
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认表单提交
    handleSubmit();
  }
});

// 统一处理提交与关闭
function handleSubmit() {
  // 执行表单提交（可替换为AJAX逻辑）
  form.submit();
  // 关闭模态框（根据你的模态框实现调整）
  modal.style.display = 'none';
}
</script>

Bootstrap 模态框场景 #

如果使用Bootstrap模态框，直接调用官方提供的关闭方法即可：

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="bootstrapForm">
        <div class="modal-body">
          <input type="text" class="form-control" id="bootstrapInput">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="bootstrapSubmit">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$('#bootstrapInput').on('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    $('#bootstrapForm').submit();
    $('#exampleModal').modal('hide'); // 调用Bootstrap模态框关闭方法
  }
});

// 若需AJAX提交，可绑定表单submit事件
$('#bootstrapForm').on('submit', function(e) {
  e.preventDefault();
  $.post($(this).attr('action'), $(this).serialize())
    .done(() => $('#exampleModal').modal('hide'));
});
</script>

关键注意事项 #

• 必须通过e.preventDefault()阻止回车键的默认表单提交行为，否则浏览器会直接刷新页面，跳过模态框关闭逻辑
• 将提交和关闭逻辑封装成统一函数，避免重复代码
• 若使用Vue/React等框架，需通过修改状态变量来控制模态框显示（比如Vue修改modalVisible，React修改isModalOpen）

内容的提问来源于stack exchange，提问作者Pogula Ganesh