reset()方法仅对form元素有效,单个input无此方法;必须用form.reset()还原初始html值,且动态js修改的value不会被恢复。

直接调用 reset() 方法只对表单有效
单独一个 <input> 元素没有 reset() 方法,必须包裹在 <form></form> 中才能用原生表单重置逻辑。否则会报错 TypeError: input.reset is not a function。
常见错误是给单个 input 绑定点击事件后直接写 input.reset(),结果脚本报错且无响应。
- ✅ 正确做法:用
form.reset()触发整个表单恢复初始值(即页面加载时的value或空值) - ⚠️ 注意:如果
input初始没有设value属性,reset()后值为空字符串,不是undefined或null - ⚠️ 动态设置过的
value(如通过input.value = "xxx")不会被reset()恢复,除非该值也写在 HTML 的value属性里
手动恢复默认值需读取 defaultValue 属性
input.defaultValue 是 DOM 元素的只读属性,它反映的是 HTML 中写的 value 属性初始值(没写就是空字符串),和 JS 赋值无关。这是手动“重置”的可靠依据。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
适用于不想包 form、或需要重置单个字段、或初始值由 JS 注入但又想保留“默认”语义的场景。
- ✅ 示例:
input.value = input.defaultValue; - ⚠️ 区分:
input.value是当前输入内容(可能被用户改过),input.defaultValue始终不变,除非重新设置input.setAttribute('value', ...) - ⚠️ 对于
type="checkbox"或type="radio",要用input.defaultChecked,不是defaultValue - ⚠️
contenteditable元素不适用此法,它没有defaultValue
用 form.reset() 时要注意初始值来源
表单重置行为完全依赖 HTML 中的属性值,JS 动态修改 input.value 不会影响重置目标。很多人误以为调用 form.reset() 会回到 JS 最后一次设的值,其实不会。
- ✅ 若希望重置到 JS 设置后的某个状态,得先用
input.setAttribute('value', newValue)同步到 HTML 属性,再调form.reset() - ⚠️
setAttribute('value', ...)会覆盖原始 HTML 值,后续刷新页面就丢失;更适合临时“锚定”默认值 - ⚠️ 使用
form.reset()会触发reset事件,可监听做清理,但注意它**不冒泡**,只能在form上监听 - ✅ 兼容性极好,所有现代浏览器都支持,包括 IE9+
避免混淆 value 属性和 value 属性值
HTML 中的 value 是属性(attribute),JS 中的 input.value 是属性(property),二者在首次加载时同步,之后就解耦了。这是绝大多数“重置失效”问题的根源。
- ✅ 查看当前属性值用:
input.getAttribute('value')(返回字符串,未设置则为null) - ✅ 查看当前 property 值用:
input.value(总是字符串,即使为空) - ⚠️
input.value = ''不会清除getAttribute('value'),所以reset()还是按原属性值恢复 - ⚠️ Vue/React 等框架中,直接操作 DOM 的
valueproperty 可能绕过响应式系统,导致视图不更新
defaultValue 和 getAttribute('value') 返回什么,往往和直觉不一致。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










