如何为非HTML表单的多步骤数据管理器创建返回按钮？

1. 实现返回按钮的输入重置与步骤回退 #

先写一个通用重置函数，把所有输入（包括单选框、禁用按钮）恢复初始状态，再绑定到返回按钮的点击事件：

// 重置所有输入状态的通用函数
function resetAllInputs() {
  // 重置第一步单选按钮
  document.querySelectorAll('#FirstStep input[type="radio"]').forEach(radio => radio.checked = false);
  
  // 重置第二步所有输入，恢复禁用按钮
  document.querySelectorAll('#SecondStep input').forEach(input => {
    input.checked = false;
    input.disabled = false;
  });
  
  // 隐藏第二步的额外区块
  document.getElementById("qChooseCY").style.display = "none";
  
  // 恢复按钮初始状态（根据你的changeButton逻辑反向调整，示例：）
  // document.getElementById('yourCreateBtn').textContent = '创建';
}

// 第二步返回按钮的点击事件
document.getElementById('backBtn').addEventListener('click', () => {
  resetAllInputs();
  // 切换回第一步显示
  document.getElementById("FirstStep").style.display = "block";
  document.getElementById("SecondStep").style.display = "none";
  document.getElementById("optionsPanel").style.display = "none";
  
  // 更新URL与历史记录
  history.pushState({ step: 1 }, '', "?step=1");
});

2. 修复浏览器返回按钮页面无响应问题 #

只调用history.pushState但未监听popstate事件，会导致URL变化后页面状态不同步。添加事件监听，根据URL参数切换页面状态：

// 监听浏览器前进/后退事件
window.addEventListener('popstate', (e) => {
  const step = new URLSearchParams(window.location.search).get('step');
  
  if (step === '1') {
    resetAllInputs();
    // 切换到第一步
    document.getElementById("FirstStep").style.display = "block";
    document.getElementById("SecondStep").style.display = "none";
    document.getElementById("optionsPanel").style.display = "none";
  } else if (step === '2') {
    resetAllInputs();
    // 切换到第二步
    document.getElementById("FirstStep").style.display = "none";
    document.getElementById("SecondStep").style.display = "block";
    document.getElementById("optionsPanel").style.display = "inline-block";
  }
});

// 优化原步骤切换函数，将步骤状态存入历史记录state
function goToSecondStep() {
  if (document.getElementById("dyadYear").checked){
        document.getElementById("qChooseCY").style.display = "block";
        changeButton();
  }
  else if(document.getElementById("countryYear").checked){
      changeButtonSecondStep();
  }
      
  document.getElementById("optionsPanel").style.display = "inline-block";
  document.getElementById("FirstStep").style.display = "none";
  document.getElementById("SecondStep").style.display = "block";
  
  // 存入步骤状态，方便popstate事件读取
  history.pushState({ step: 2 }, '', "?step=2");
}

3. 页面初始化同步URL状态 #

确保页面加载时，URL参数与页面显示状态一致：

window.addEventListener('load', () => {
  const initialStep = new URLSearchParams(window.location.search).get('step');
  resetAllInputs();
  
  if (initialStep === '2') {
    document.getElementById("FirstStep").style.display = "none";
    document.getElementById("SecondStep").style.display = "block";
    document.getElementById("optionsPanel").style.display = "inline-block";
  } else {
    document.getElementById("FirstStep").style.display = "block";
    document.getElementById("SecondStep").style.display = "none";
    document.getElementById("optionsPanel").style.display = "none";
  }
});

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