打开modal后按回车键触发外部登录表单的问题该如何解决

默认回车提交触发逻辑是：当用户未指定焦点位置时，浏览器会默认触发页面中第一个可提交表单的提交事件；如果用户焦点在某个输入框内，则触发该输入框所属表单的提交事件。该异常本质是模态框打开时，焦点仍落在后方登录表单范围内，或者回车事件没有被模态框捕获，直接穿透触发了后方登录表单的提交逻辑。

1. 模态框内单独嵌套独立form标签（成本最低） #

将模态框内的所有新建用户输入项、提交按钮都包裹在独立的<form>标签内，和后方的登录表单完全隔离开。用户在模态框输入项内按下回车时，会优先触发当前聚焦输入项所属的表单提交事件，不会触发后方登录表单。
示例代码：

<!-- 后方登录表单 -->
<form id="loginForm">
  <input type="text" name="loginUsername">
  <input type="password" name="loginPwd">
  <button type="submit">登录</button>
</form>

<!-- 新建用户模态框 -->
<div class="modal">
  <form id="createUserForm">
    <input type="text" name="newUsername">
    <input type="password" name="newPwd">
    <button type="submit">新建用户</button>
  </form>
</div>

2. 模态框打开时锁定后方登录表单提交能力 #

在模态框弹出的回调逻辑中，临时拦截后方登录表单的提交事件，模态框关闭后再恢复提交能力。
示例JS逻辑：

const loginForm = document.querySelector('#loginForm')
const modal = document.querySelector('.modal')

// 打开模态框时锁定登录表单
function openModal() {
  modal.style.display = 'block'
  loginForm.addEventListener('submit', blockLoginSubmit)
}

// 关闭模态框时恢复提交能力
function closeModal() {
  modal.style.display = 'none'
  loginForm.removeEventListener('submit', blockLoginSubmit)
}

function blockLoginSubmit(e) {
  e.preventDefault()
  return false
}

3. 捕获模态框内回车事件，阻止冒泡穿透 #

给模态框绑定键盘事件监听器，监听到回车（keyCode === 13）时，阻止事件向上冒泡到后方页面，同时手动触发新建用户的提交逻辑。
示例JS逻辑：

document.querySelector('.modal').addEventListener('keydown', (e) => {
  if(e.keyCode === 13) {
    e.stopPropagation()
    e.preventDefault()
    // 调用新建用户提交逻辑
    createNewUser()
  }
})

4. 模态框打开时自动聚焦内部输入项 #

模态框弹出后，立刻调用模态框内第一个输入框的focus()方法，让焦点落在模态框内部，此时按下回车会优先触发焦点所在区域的提交逻辑，不会穿透到后方表单。
示例JS逻辑：

function openModal() {
  modal.style.display = 'block'
  // 自动聚焦模态框内第一个输入框
  document.querySelector('#createUserForm input:first-of-type').focus()
}

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