一、 先说个背景

在网页里做表单搜索的，常常会遇到提交后想让搜索框变空，省得下一次要再手动删字，太麻烦了这个。其实很多前端小伙伴都这么想：“我怎么做到呢？”

1️⃣ 为什么需要清空？

蚌埠住了！ 用户体验真的很重要呀。一个页面上有搜索框， 用户搜完东西后如果不自动清空，就得自己点点删除按钮或者手动删除字符，这就多了一步操作。

2️⃣ 用 JavaScript 来搞定吧！😎

有啥用呢？ 我们只需要写一段简单的脚本就行啦， 下面给你们示例代码：

注意：如果你把脚本放在页面头部，那么可能找不到元素， 我个人认为... 主要原因是那时候元素还没渲染出来。最好放到

之前。

3️⃣ 换个方式：用 `reset` 方法也可以哦！🤔

`reset` 是原生 DOM 提供的方法，用它可以一次性把整个表单里的值恢复默认状态。代码如下：

不过要注意，如果你有隐藏字段或者是一些默认值，那它们也会被重置哦，这玩意儿...。

4️⃣ 小坑提醒⚠️：记得不要忘记 `return false` 或者 `e.preventDefault` 啊，否则浏览器会直接刷新页面导致看不到效果。

内卷... 还有一个细节， 就是如果你使用的是 `` 并且服务器端需要处理请求，那么你就不能简单地阻止默认行为。那种情况下你可以把数据通过 Ajax 异步发送，然后再手动清空输入框。

javascript // 用 fetch 简化 Ajax 调用 fetch('/search', { method:'POST', headers:{'Content-Type':'application/json'}, 乱弹琴。 body:JSON.stringify }).n) .n(data=>{ console.log; document.getElementById.value=''; // 清空 }).catch);

二、 实战案例：让代码更稳一点💪🏻

• #1. 先检查浏览器支持情况：有些老旧浏览器没有 `addEventListener`，那只能用 `attachEvent` 或者直接给元素加属性。
• #2. 如果你想兼容 IE9 以下 可以写一个通用绑定函数：

javascript function addEvent{ if{ ele.addEventListener; }else if{ ele.attachEvent; }else{ ele=handler; } } addEvent,'submit',function{ e 换个赛道。 =e||window.event; if e.preventDefault; else e.returnValue=false; var val=document.getElementById.value; console.log; document.getElementById.value=''; });

上面这段代码能跑在 IE7/8 都能跑，不过 IE10+ 已经不需要这么麻烦了。

三、 SEO 小技巧 🎯

• #1. 确保你的 `
  ` 有 `action` 属性，这样搜索后来啊页能被抓取到；否则搜索引擎看到的是一个纯粹的客户端操作，不会收录后来啊页内容。
• #2. 不要把关键字放在 placeholder 里 而是用 `` 标记起来让屏幕阅读器也能识别；一边 `` 的文本最好包含关键词，以提升可见度。

一下：

1. 使用 JavaScript 给表单添加 submit 事件， 然后把输入框 value 设置为空；或直接调用 form.reset;

再说说一句话说一句话：如果你还没学过 JavaScript，那赶紧去学吧，要不然自己写出来乱七八糟的东西，看着都尴尬。🤪😉

温馨提示 - 如果你的项目中已经使用了 jQuery， 可以改成：

javascript $.on{ e.preventDefault; $.val; });，呃...

• 如果你想进一步优化体验，可以考虑在成功提交后弹窗提示：“已提交成功”，然后再清空输入框。

祝大家编码愉快，也希望这篇文章帮到了正在摸爬滚打的小伙伴们～ 🚀