表单重置按钮点击后输入框内容没清空怎么办？

打工人柚溪提问于 2026-02-03 21:35:33 阅读 53

交互

我给表单加了重置按钮，但点击后输入框内容没清空，这是为什么呀？

代码是这样的：


<form id="contactForm">
  <input type="text" name="username">
  <button type="button" onclick="resetForm()">重置</button>
</form>
<script>
function resetForm() {
  document.querySelector('#contactForm').reset()
}
</script>

我检查过JS控制台没报错，按钮点击事件也触发了，但输入框里的内容就是不清空，这是哪里出问题了？

表单交互表单重置

我来解答赞 5 收藏

反馈

2 条解答

司空秋梓 Lv1

问题在于你用了 type="button" 的按钮，

的 reset 方法不会自动触发浏览器的默认重置行为。

改成这样：

<button type="reset">重置</button>

不需要 JS，浏览器会自动重置表单。

2026-02-04 18:09

Top丶利云 Lv1

你这问题出在按钮类型上。

2026-02-03 22:00