Handlebars表单按Enter异常：跳转必填框或自动提交问题求助

你的问题核心有两个：

1. 按Enter键时被浏览器默认行为干扰，要么跳转到必填字段，要么直接提交表单
2. 代码中存在数组引用错误，导致自定义跳转逻辑根本没生效

问题根源 #

• 数组名不一致：你定义了inputField_ID_array存储输入框ID，但函数里却用了未定义的textArray，跳转逻辑完全无法执行
• 未阻止默认行为：浏览器对Enter键有默认处理规则：
  • 当表单存在required字段时，会自动跳转到下一个未填写的必填项
  • 无required字段时，直接触发表单提交
    这两种行为都会覆盖你的自定义跳转逻辑

修复后的完整代码 #

1. 修正JS函数（核心修复） #

const inputField_ID_array = ["ledger_num","file_num","agereement_date","client_name","client_gaurdian",
"guarantor_name","guarantor_gaurdian".............]

function focusNext(e) {
  // 只处理Enter键
  if (e.keyCode !== 13) return;

  // 彻底阻止浏览器默认行为（关键）
  e.preventDefault();

  const currentId = e.target.id;
  const currentIndex = inputField_ID_array.indexOf(currentId);

  // 找到当前输入框且不是最后一个时，跳转到下一个
  if (currentIndex !== -1 && currentIndex < inputField_ID_array.length - 1) {
    M.updateTextFields();
    document.querySelector(`#${inputField_ID_array[currentIndex + 1]}`).focus();
  }
  
  // 可选：如果是最后一个输入框，可手动触发表单提交
  // else {
  //   document.querySelector('form').submit();
  // }
}

2. 优化HTML绑定（可选） #

建议把onkeydown直接绑定在<input>标签上，避免父容器触发的干扰：

<input id="ledger_num" name="ledger_num" type="text" class="validate" required onkeydown="focusNext(event)">

进阶优化（适合52个输入框的场景） #

手动维护52个ID的数组太麻烦，可以通过DOM自动获取输入框顺序，无需手动维护ID：

function focusNext(e) {
  if (e.keyCode !== 13) return;
  e.preventDefault();

  // 自动获取表单内所有带validate类的输入框
  const allInputs = Array.from(document.querySelectorAll('form input.validate'));
  const currentIndex = allInputs.indexOf(e.target);

  if (currentIndex !== -1 && currentIndex < allInputs.length - 1) {
    M.updateTextFields();
    allInputs[currentIndex + 1].focus();
  }
}

这种方式新增/删除输入框时，无需修改JS代码，更灵活高效。

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