表单onchange触发submit重载后，如何自动回到上次填写的对应位置

方案1：URL锚点定位（无需后端修改，优先级推荐） #

利用浏览器原生的锚点跳转特性，提交时把当前操作的输入框ID加到URL哈希中，页面重载后浏览器会自动定位到对应ID的元素位置，改造成本极低。

修改步骤：

1. 新增提交处理函数，替换原有行内提交逻辑

function submitForm(currentInput) {
  const form = document.getElementById('formName');
  // 将当前触发提交的输入框ID写入表单action的哈希段
  form.action = `#${currentInput.id}`;
  form.submit();
}

2. 替换所有checkbox的onchange属性值为onchange="submitForm(this)"
   修改后的完整表单示例：

<form id="formName" action="" method="POST">
  <label for="check1">Check 1:</label>
  <input type="checkbox" id="check1" name="check1" value="0" onchange="submitForm(this)"><br>
  <label for="check2">Check 2:</label>
  <input type="checkbox" id="check2" name="check2" value="0" onchange="submitForm(this)"><br>
  <br>
  ... 200+ lines ...<br>
  <br>
  <label for="check214">Check 214:</label>
  <input type="checkbox" id="check214" name="check214" value="0" onchange="submitForm(this)"><br>
</form>

方案2：隐藏域传参（不希望URL带哈希时使用） #

如果不想在URL中显示锚点，可以通过隐藏域把最后操作的输入框ID传给后端，后端返回页面时再回传给前端做定位。

修改步骤：

1. 表单内新增隐藏域存储最后操作的输入框ID

<input type="hidden" name="lastActiveId" id="lastActiveId" value="">

2. 替换提交处理函数

function submitForm(currentInput) {
  document.getElementById('lastActiveId').value = currentInput.id;
  document.getElementById('formName').submit();
}

3. 后端处理完POST请求后，将收到的lastActiveId参数注入到返回的页面模板中，添加页面加载后的定位逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 此处的{{lastActiveId}}替换为你所用后端框架的模板输出语法
  const lastActiveId = "{{lastActiveId}}";
  const targetEl = document.getElementById(lastActiveId);
  if (targetEl) {
    // 可自行调整滚动行为，加behavior: 'smooth'为平滑滚动
    targetEl.scrollIntoView({
      block: 'center' // 定位到视口中间，更醒目
    });
    // 可选：给目标元素加临时高亮，方便用户识别
    targetEl.style.outline = '2px solid #2563eb';
    setTimeout(() => targetEl.style.outline = 'none', 3000);
  }
});

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