如何在表单提交后清空输入框内容

在构建待办事项（to-do list）等交互式网页应用时，用户提交任务后自动清空输入框是基础且必要的体验优化；本文将手把手教你通过原生 javascript 正确获取并重置 input 元素的 value 值。

要实现在点击“添加”按钮（或回车提交）后自动清空输入框，关键在于：必须操作 dom 元素本身，而非仅读取其初始值。常见错误（如提问者所遇）是这样写的：

let user_input = document.querySelector(".myinput").value; // ❌ 错误：获取的是字符串副本 // ……后续 user_input = ""; 并不会影响页面上的 input 元素！

这行代码只是把输入框当时的文本值复制给了变量 user_input，之后对这个变量赋空字符串，完全不影响 DOM 元素——所以输入框内容“纹丝不动”。

✅ 正确做法是：先通过唯一标识（推荐使用 id）精准获取 input 元素对象，再修改其 .value 属性：

 Add

function addTask() {   const inputEl = document.getElementById("myinput"); // ✅ 获取元素对象（非值）   const inputValue = inputEl.value.trim(); // 获取值并去除首尾空格    if (inputValue !== "") {     // ✅ 此处插入你的添加逻辑（如创建 li、追加到列表等）     // appendToList(inputValue);      // ✅ 提交后立即清空输入框     inputEl.value = ""; // 直接修改 DOM 元素的 value 属性   } }

? 重要注意事项：

• 使用 id 而非 class 查找元素更高效、更可靠（getElementById 比 querySelector 快，且确保唯一性）；
• 清空操作 inputEl.value = “” 必须放在任务添加逻辑之后，否则可能因异步或 DOM 更新顺序导致意外行为；
• 建议配合 .trim() 过滤纯空格输入，避免添加无意义空白任务；
• 若使用表单
  
  提交，请为 submit 事件添加 Event.preventDefault()，防止页面刷新导致状态丢失。

掌握这一模式，不仅适用于 To-Do List，所有带输入+提交场景（如留言框、搜索栏、登录表单）均可复用——清空输入框，是专业前端交互体验的起点。