form.reset() 清空是因为它回退到html初始attribute值，不认js动态设置的value/checked等；需用defaultvalue临时保存或手动控制字段值。
form.reset() 为什么一调就全清了
因为 form.reset() 不是“清空”，而是“回退到 HTML 加载时的 value、checked、selected 属性值”。它完全不认 JS 动态设置的 el.value 或 el.checked，只读取初始 attribute。比如：<input value="keyword"> 加载后你改成 “搜索词”，点重置就变回 “keyword”；但如果你压根没写 value，它就变空——不是你想保留的那个 “搜索词”。
常见错误现象：
-
<input id="kw">→ JS 执行document.getElementById('kw').value = '前端'→ 点 reset → 输入框变空 - Layui 渲染的
select或checkbox完全不受defaultValue影响，改了也白改 - 表单里有动态插入的字段（如 JS append 的 input），
reset()根本不处理它们
用 defaultValue 临时“骗过”原生 reset（仅限纯 input）
适用于没用 Layui、Element 等框架渲染的简单表单，且只针对 input[type="text"] 等可设 defaultValue 的控件。
操作步骤：
- 重置前，把你想保留的值存进
el.defaultValue：const kw = document.getElementById('kw'); kw.defaultValue = kw.value; - 再调
document.querySelector('#myForm').reset()或layui.form.reset() - 重置后立刻还原
defaultValue，避免下次 reset 还生效：kw.defaultValue = '';
⚠️ 注意：select、checkbox、radio 不支持靠 defaultSelected/defaultChecked 控制 UI 行为，此法对它们无效；Layui 的下拉框、开关等自定义渲染组件更不认这个。
手动清空 + 显式恢复（最稳，推荐）
绕过 reset()，自己控制每个字段：清掉该清的，放回该留的。适合有明确保留字段（如 #searchKeyword、#userId）的场景。
实操要点：
- 先缓存要保留的值：
const savedKw = document.getElementById('searchKeyword').value; - 用
querySelectorAll排除目标字段，批量清空：form.querySelectorAll('input:not(#searchKeyword), select:not(#statusSelect)') - 逐个设值：
el.value = ''、el.selectedIndex = -1、el.checked = false（注意 checkbox/radio 必须设checkedproperty，不是defaultChecked） - 最后显式恢复保留字段：
document.getElementById('searchKeyword').value = savedKw; - 若用了 Layui 渲染，必须补一句：
layui.form.render('select')或layui.form.render()，否则下拉框 UI 不更新
监听 reset 事件 + setTimeout 恢复（适合全局默认值）
当你要“所有表单都统一保留某些字段”或“默认值来自接口/配置”，不适合硬编码 ID，可用事件监听方式。
关键细节：
- 必须用
setTimeout(() => { /* 恢复逻辑 */ }, 0)，因为reset事件触发时字段已被还原，但 DOM 渲染尚未完成，直接赋值会被覆盖 - 不要用
getAttribute('value')取初始值——HTML 没写value时返回null，而el.value此时是空字符串，两者不等价 - 对
checkbox/radio，得单独保存el.checked；对select，得存el.selectedIndex或el.selectedOptions - 如果表单里有
input[type="file"]，reset()它永远不生效，必须额外加fileInput.value = ''
真正难的不是写几行代码，而是想清楚：你所谓的“保留”，到底是“回到页面加载时的状态”，还是“回到用户上次输入的状态”，或是“回到某个业务默认值”——三者技术路径完全不同，混用就会出 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
