reset按钮仅恢复HTML初始attribute值，不认JS修改的property；需手动缓存初始状态并在reset事件后用setTimeout恢复。
reset 按钮只能清空用户输入，不能恢复初始 value
HTML 的 <input type="reset"> 本质是把所有表单控件“重置为页面加载时的值”，而不是你后来用 JavaScript 设置的 value。如果你动态改过 input.value、或通过 setAttribute('value', ...) 修改过，reset 不会认这些——它只看 DOM 初始化时的 value 属性（即 HTML 中写的值）。
常见错误现象：<input value="默认值"> → JS 执行 el.value = '新内容' → 点 reset → 输入框变空（不是变回“默认值”）。
- 根本原因：JS 赋值修改的是元素的
value属性值（property），而reset行为读取的是value初始属性（attribute） - 验证方法：执行
el.getAttribute('value')和el.value，两者很可能不一致 - 兼容性无问题，但行为在所有浏览器中都一样——它就是这么设计的
手动恢复初始值需提前保存快照
要真正“恢复到你期望的初始状态”，必须自己存一份初始值，在 reset 时主动赋回去。最稳妥的方式是在页面加载后、任何用户交互前，遍历表单字段并缓存其初始 value、checked、selectedOptions 等状态。
示例（仅处理 text/password/email 类型）：
const form = document.querySelector('form');
const initialValues = {};
form.querySelectorAll('input:not([type="reset"]):not([type="submit"])').forEach(el => {
if (['text', 'password', 'email', 'number'].includes(el.type)) {
initialValues[el.name] = el.value; // 注意：这里读的是 property，但前提是没被 JS 改过
}
});
form.addEventListener('reset', e => {
setTimeout(() => {
Object.entries(initialValues).forEach(([name, val]) => {
const el = form.elements[name];
if (el && ['text', 'password', 'email', 'number'].includes(el.type)) {
el.value = val;
}
});
}, 0);
});
- 用
setTimeout(..., 0)是因为原生reset事件触发时，表单字段已被清空，但尚未完成渲染；延迟执行可确保我们覆盖它的结果 - 不要依赖
el.getAttribute('value')获取初始值——如果 HTML 里没写value="..."，它返回null，而el.value此时是空字符串 - 对
checkbox、radio、select需单独处理checked和selectedIndex，不能只看value
用 FormData + setAttribute 实现“声明式初始值”
如果你能控制表单初始化方式，更干净的做法是：所有初始值统一由 HTML value 属性定义，并避免后续用 JS 直接改 el.value。这样 reset 就能正常工作。
但有时 JS 初始化不可避免（比如从 API 加载默认数据）。此时可用 setAttribute 显式同步初始属性：
const input = document.querySelector('#username');
input.setAttribute('value', '张三'); // 同步 attribute
input.value = '张三'; // 同步 property
- 这样之后点
<input type="reset">就真能回到“张三” - 注意顺序：先
setAttribute再赋value，否则setAttribute可能被后续 JS 覆盖 - 缺点：对
textarea要操作textContent，对select要设selectedIndex并同步option[selected]，不够通用
reset 事件监听器里别直接 return false
有人想“拦截 reset 行为再自定义逻辑”，于是给 form.addEventListener('reset', e => { e.preventDefault(); ... })。这会导致原生重置完全失效，且容易漏掉某些控件（比如 contenteditable 区域或自定义组件）。
- 更安全的做法是：不阻止默认行为，而是用
setTimeout在它之后补救（见第二个副标题） - 如果必须阻止（比如带确认弹窗），那就彻底放弃原生
reset，改用纯 JS 控制：隐藏原生按钮，绑定自定义 click 处理器 - 特别注意：Safari 对
reset事件的冒泡行为略有差异，preventDefault()后再手动触发form.reset()可能不生效
真正麻烦的从来不是怎么写 reset 逻辑，而是初始状态到底该以什么形式存在——DOM attribute？JS 变量？还是服务端返回的 schema？选错载体，后面全是补丁。
