正确做法是阻止默认重置行为并手动还原表单到初始值，同时插入二次确认逻辑；需预先缓存各控件初始状态，reset事件中先确认再逐项恢复value/checked/selected等属性。
在表单提交前拦截重置（reset）事件并弹出二次确认，不能靠 event.preventDefault() 后再手动清空——因为 reset 事件本身是同步触发的，且原生行为不可逆向“取消后保留旧值”。正确做法是：**阻止默认重置行为，手动还原表单控件到初始值，并在此过程中插入确认逻辑**。
监听 reset 事件并阻止默认行为
reset 事件在 <input type="reset"> 或 form.reset() 调用时触发。它在表单重置「之前」触发，此时调用 event.preventDefault() 可阻止浏览器自动还原值。
- 必须给
<form></form>元素绑定reset事件，而不是 reset 按钮的 click - 仅阻止默认行为还不够，需主动控制字段值还原逻辑
保存表单初始状态（关键前提）
浏览器原生 reset 依赖 HTML 中的 value、checked、selected 等初始属性。JS 修改后这些属性不会自动更新，因此需在页面加载后主动记录初始值：
- 遍历表单内所有可交互元素（
input、textarea、select、checkbox、radio） - 对每个元素缓存其初始值：
element.dataset.initialValue或用 Map 存储 - 特别注意：radio/checkbox 要存
checked状态；select多选要存selectedOptions的 value 数组
手动还原 + 二次确认实现
在 reset 事件中，先弹窗确认，再根据用户选择决定是否执行还原逻辑：
- 使用
confirm("确定要清空所有输入吗？")最简方案（阻塞式，适合内部系统） - 或用自定义模态框（非阻塞），需将还原逻辑放入确认回调中
- 还原时逐个设置：
• text/password/email 等：赋值el.value = initialVal
• checkbox/radio：设置el.checked = initialChecked
• select 单选：设el.value = initialVal；多选：遍历el.options设option.selected
兼容性与细节提醒
某些场景下 reset 事件可能不触发（如动态创建的表单未绑定事件），建议：
- 确保事件监听在 DOM 加载完成后添加（如
DOMContentLoaded） - 若表单含富文本编辑器（如 TinyMCE）、日期组件等，它们的值不通过原生属性管理，需额外调用其 API 清空
- 避免在 reset 事件里做异步操作（如 fetch），否则用户点击“确定”后界面可能不同步
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
