使用原生JavaScript获取单页多表单输入值及精准捕获回车提交的对应表单值

嘿，这个场景我太熟悉了——页面里堆着好几个表单，用户随便在哪个输入框按回车，都得精准拿到对应表单的内容，还得支持后续动态加新表单对吧？别担心，用原生JS就能轻松搞定，我给你一步步捋清楚：

核心思路 #

用户在输入框按回车时，我们要做这几件事：

1. 精准定位触发回车的输入框所属的具体表单
2. 阻止浏览器默认的表单提交行为（避免页面刷新丢失数据）
3. 高效收集这个表单里的所有输入值

具体实现代码 #

保留你现有的HTML结构，直接添加下面的JavaScript代码就行：

// 获取表单容器
const formsContainer = document.querySelector('.forms-container');

// 给容器绑定按键事件（用事件委托，支持后续动态添加的表单）
formsContainer.addEventListener('keydown', function(e) {
  // 只处理回车键
  if (e.key !== 'Enter') return;

  // 确认触发事件的是输入类元素（可根据需求添加select/textarea）
  const activeElement = e.target;
  const validTags = ['INPUT'];
  if (!validTags.includes(activeElement.tagName)) return;

  // 找到当前输入框所属的最近表单
  const targetForm = activeElement.closest('.form');
  if (!targetForm) return;

  // 阻止默认提交行为，避免页面刷新
  e.preventDefault();

  // 方法1：用原生FormData快速收集数据（推荐，省心省力）
  const formData = new FormData(targetForm);
  // 转成普通对象方便后续业务逻辑使用
  const formValues = Object.fromEntries(formData.entries());

  // 方法2：手动遍历表单元素（适合需要自定义处理的场景）
  // const formValues = {};
  // targetForm.querySelectorAll('input').forEach(input => {
  //   if (input.name) {
  //     formValues[input.name] = input.value;
  //   }
  // });

  // 这里就拿到精准的表单数据了，接下来做你需要的操作就行
  console.log('用户提交的表单数据：', formValues);
});

关键细节说明 #

• 事件委托的优势：把事件绑定在父容器上，后续不管通过JS动态添加多少新表单，都能自动触发回车事件，不用重复写绑定逻辑
• 精准定位表单：closest('.form')会向上查找最近的带.form类的表单元素，完美解决“哪个输入框触发就对应哪个表单”的问题
• FormData的便捷性：原生API自动识别所有带name属性的表单元素，不用手动一个个获取值，省超多代码
• 阻止默认行为：一定要加e.preventDefault()，不然浏览器会默认提交表单导致页面刷新，之前收集的数据直接就没了

注意事项 #

• 所有需要收集值的表单元素，必须设置name属性，不管用FormData还是手动遍历，name都是识别字段的关键
• 如果你的表单里有复选框、单选框这类特殊元素，FormData也能正确处理它们的选中值，不用额外写逻辑
• 要是需要支持更多表单元素类型，直接把对应的标签名（比如SELECT、TEXTAREA）加到validTags数组里就行

备注：内容来源于stack exchange，提问作者Shakil Ahmed