input.value = '' 是最直接、稳定、兼容性最佳的清空方式，适用于所有现代浏览器及移动端 webview，无需依赖 form 重置或父级元素。

直接用 input.value = '' 最快最稳

不用触发表单重置、不依赖父级 form、兼容所有现代浏览器，包括移动端 WebView。这是最直白也最可控的方式。

常见错误现象：input.value = null 或 input.value = undefined 看似清空了，但实际值变成字符串 "null" 或 "undefined"；input.innerHTML = '' 对 input 无效（它不是容器元素）。

• input.value = '' 是唯一推荐的赋值方式
• 如果绑定过 v-model（Vue）或 value 属性受控，需同步更新对应数据状态，否则下次渲染会“抢回”旧值
• 对 type="number" 的输入框，设为空字符串后，input.valueAsNumber 会变成 NaN，但 input.value 仍是 '' —— 这是预期行为，不是 bug

用 form.reset() 时必须小心字段名

它只重置有 name 属性的 input，且只恢复到 HTML 中初始的 value 值（或缺省空值），不是 JS 动态改过的值。

使用场景：表单提交后一键还原全部字段，但前提是所有要重置的字段都带 name，且你接受“回到页面加载时的状态”这个逻辑。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 没写 name 的 input 不会被 form.reset() 影响
• input 的初始 value 是 ""，但 JS 曾执行过 el.value = 'abc'，reset() 后仍会变回 "" —— 它不认 JS 改动
• 如果用了 required 或其他校验属性，reset() 后校验状态（如 :invalid 伪类）也会重置

别碰 input.type = 'text' 这种重设类型操作

有人想“先改 type 再改回来”来清空，比如 input.type = 'hidden'; input.type = 'text'，这不仅无效，还会在部分浏览器中抛错或导致焦点丢失、事件监听器被剥离。

性能与兼容性影响：IE11 及更早版本下，修改 type 会完全重建 DOM 节点，绑定的事件、自定义属性全丢；Chrome/Firefox 虽不报错，但属于未定义行为，MDN 明确标注为“不推荐”。

• 绝对不要用 input.setAttribute('type', ...) 来清空
• 同理，input.outerHTML = input.outerHTML 是重渲染陷阱，可能触发无谓的 layout thrashing
• 真要“强制刷新”，input.value = ''; input.dispatchEvent(new Event('input', { bubbles: true })) 才是安全补全

React/Vue 场景下清空要分清“受控”和“非受控”

框架里最常踩的坑：DOM 清空了，状态没同步，或者状态清空了，但 input 没响应 —— 根本原因是混淆了受控（controlled）与非受控（uncontrolled）模式。

使用场景：用户点击「清空」按钮后，既要清输入框，又要清关联 state；若用 ref 直接操作 DOM，而 state 未更新，下一次 render 就会覆盖 DOM 修改。

• React 中：必须同时 setValue('') + 确保 value prop 更新，否则警告 “A component is changing an uncontrolled input to be controlled”
• Vue 中：用 v-model 时，直接 modelValue = '' 即可；若用 ref + .value，记得也要同步 data 或 ref 的值
• 非受控组件（比如临时用 ref 读取、不绑定 state）可以放心用 input.value = ''，但之后不能再走受控流程

事情说清了就结束。注意：清空动作本身很简单，难的是判断当前上下文是否受控、是否有副作用、是否需要触发后续事件 —— 这些才是实际项目里卡住人的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！