必须显式设置 input 元素的 value 属性为 "" 才能清空，innerHTML 和 textContent 无效；批量操作推荐 querySelectorAll；框架中需更新 state 而非直接操作 DOM。
点击按钮后输入框内容没清空，检查是否漏了 value 赋值
HTML 的 <input type="text"> 是“受控”还是“非受控”，直接决定清空逻辑是否生效。常见错误是只调用 element.innerHTML = "" 或误以为 element.textContent = "" 有效——这两者对 input 元素完全无效。
必须显式设置 value 属性为 ""，浏览器才会真正清空显示内容：
document.getElementById("myInput").value = "";
-
value是input元素的可写属性，反映当前用户可见文本 -
innerHTML和textContent对input无影响（它不是容器元素） - 如果用了框架（如 React），需同步更新 state，否则 DOM 清空后下次 re-render 会覆盖
多个输入框要一起清空，别一个一个写 getElementById
当页面有多个 input（比如搜索栏、用户名、邮箱），逐个查 ID 效率低且易漏。更稳妥的方式是按类型或 class 批量操作：
document.querySelectorAll("input[type='text'], input[type='search'], textarea").forEach(el => el.value = "");
- 用
querySelectorAll比getElementsByClassName更灵活，支持复合选择器 - 包含
textarea是因为用户常把它们混用，清空逻辑一致 - 避免用
input:not([type="hidden"])—— 某些老版本 IE 不支持:not() - 如果某些输入框需保留（如密码框），加排除类：
input:not(.keep)
清空后光标还在原位置？主动聚焦并选中内容再清空
单纯设 value = "" 后，光标会停在开头，但用户可能期望清空后立即可输入，或希望清空前先高亮现有内容（增强操作反馈）。这时需要手动控制焦点和选中状态：
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById("myInput");<br>input.select(); // 先全选<br>input.value = ""; // 再清空<br>input.focus(); // 确保焦点仍在
-
select()在清空前调用才有效；清空后再调select()无效（没内容可选） - 移动端 Safari 对
select()支持不稳定，可降级为focus()+setSelectionRange(0, 0) - 如果按钮本身触发了表单提交，记得加
event.preventDefault()，否则页面可能刷新导致清空失效
Vue/React 中清空失败？别直接操作 DOM，改 state
在 Vue 或 React 里硬写 document.getElementById(...).value = "" 往往失败，因为框架接管了渲染逻辑。DOM 清空会被下一次 state 更新覆盖，造成“闪一下又回来”的现象。
正确做法是更新绑定的数据源：
// Vue 示例<br><input v-model="searchQuery" /><br><button @click="searchQuery = ''">清空</button>
// React 示例<br>const [search, setSearch] = useState("");<br><input value={search} onChange={(e) => setSearch(e.target.value)} /><br><button onClick={() => setSearch("")}>清空</button>
- 不要绕过 state 直接改 DOM，否则打破数据流一致性
- 如果用了
useRef强行操作，仅限极少数场景（如第三方组件不支持受控模式） - 注意：
v-model或value+onChange必须成对出现，否则输入框会变只读
value 赋值这个点最容易被跳过，一漏就卡住半天。 
