reset() 仅重置表单控件的初始值，若JS动态修改value但未同步defaultValue、控件不在form内、框架中未同步数据状态或存在隐藏/禁用控件，均会导致清空失效。
点击按钮后表单值没清空？reset() 可能没生效
直接调用 form.reset() 是最常用方式，但它只重置「表单控件的初始值」——也就是页面加载时各字段的 value、checked、selected 状态。如果 JS 动态改过 input.value 但没同步更新 DOM 的初始值（比如没设 input.defaultValue），reset() 就不会还原成你期望的“空”状态。
常见错误现象：input 已被 JS 赋值，点重置按钮后内容还在；textarea 用 innerText 设置内容，reset() 无效；select 用 JS 切换 selectedIndex，但没设 select.options[0].selected = true 作为默认项。
- 确保所有控件在 HTML 中有明确初始状态：比如
<input value="">、<select><option selected></option></select> - 避免用
element.value = xxx后不维护defaultValue；如需 JS 预填，建议用form.reset()后再统一赋值，而非覆盖初始值 -
reset()不触发input或change事件，如有依赖事件的校验逻辑，需手动补发
需要清空整个页面输入？别只盯着 <form>
很多页面的输入不在 <form> 标签内：独立的 input、contenteditable 区域、动态渲染的搜索框、第三方组件（如 react-select、vue-datepicker）封装的输入框——这些 form.reset() 完全不处理。
使用场景：后台管理页带多个筛选区 + 表格内联编辑 + 顶部全局搜索框，点击「重置全部」要一并清空。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 选择器定位所有可清空元素：
document.querySelectorAll('input:not([type=hidden]), textarea, select, [contenteditable]') - 对每类元素分别处理：
input和textarea设.value = ''；select设.selectedIndex = 0（或遍历 options 找selected属性）；contenteditable元素清空.innerText或.innerHTML - 注意隐藏域（
type="hidden"）通常不应清空，除非业务明确要求
type="reset" 按钮为什么点了没反应？
这是最容易被忽略的兼容性陷阱：type="reset" 按钮必须位于 <form> 标签内部，且该 form 必须包含至少一个「可重置的表单控件」（input、select、textarea、button）。如果父 form 是空的，或控件被 display: none / visibility: hidden 隐藏（注意：后者仍算存在），type="reset" 依然会触发重置逻辑——但用户看不到效果，误以为失效。
- 检查按钮是否真的在
<form>内部：用浏览器开发者工具看 DOM 结构，不要只信视觉位置 - 确认表单里至少有一个非禁用（
disabled）的可交互控件；disabled控件不会被reset()影响，也不参与重置流程 - 避免给
form设置onreset="return false"或监听reset事件后调用event.preventDefault()，这会完全阻止默认行为
Vue/React 项目里重置表单更麻烦？绕开框架陷阱
在响应式框架中，直接操作 DOM（如调用 form.reset()）往往无效，因为视图由数据驱动。比如 Vue 的 v-model 绑定的 input，DOM 重置后 data 仍为旧值；React 的受控组件（value={this.state.xxx}）同理，DOM 改变不等于 state 改变。
- Vue：优先用
this.$refs.form.reset()（仅当表单是原生<form>且绑定ref），但更可靠的是重置对应 data 对象：this.formData = { ...this.initialData }，再用$nextTick确保 DOM 更新 - React：不能依赖
ref.current.reset()，应调用setState({ field: '' })或用useReducer发送重置 action；若用useForm（如 React Hook Form），必须调用reset()方法而非 DOM 方法 - 任何框架下，都不要混合使用「受控」和「非受控」模式：比如一边用
v-model，一边又手动input.value = ''，会导致 React/Vue 警告甚至异常
// 纯 JS 安全重置示例：兼顾原生表单 + 独立控件
function hardResetPage() {
// 1. 重置所有 form
document.querySelectorAll('form').forEach(form => form.reset());
// 2. 清空独立 input/textarea/select
document.querySelectorAll('input:not([type=hidden]), textarea, select').forEach(el => {
if (el.tagName === 'SELECT') {
el.selectedIndex = 0;
} else if (el.type === 'checkbox' || el.type === 'radio') {
el.checked = false;
} else {
el.value = '';
}
});
// 3. 清空 contenteditable 元素
document.querySelectorAll('[contenteditable]').forEach(el => {
el.innerText = '';
});
}
重置逻辑真正复杂的地方，从来不是「怎么写一行代码」，而是得同时判断：这个字段是原生还是框架托管？它的初始值有没有被 JS 动态污染？它是否在 form 外却需要联动清空？漏掉任意一种，用户就会觉得「重置按钮坏了」。 
