上一篇：用JS实现获取json对象的值得代码是什么下一篇：JS中常见的几种删除对象的某个属性方法是什么

这篇文章给大家介绍了“用JS如何实现reset重置表单事件”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

我们都知道form表单中有一个默认的reset重置表单事件，你一定会很熟悉，后面我也会对reset事件使用详细解释，请先看下面的代码。

<input type="reset">

为什么有了reset按钮了，我们还要使用js或jquery来实现reset事件呢？这是因为有时候我们form表单提交完数据之后，返回到form表单页面，它不会自己重置form表单。

也就是数据已经提交了，但是旧数据还在input输入框中，对后面的数据输入很不方便，这个时候我们就需要使用js来实现reset事件了。

先看看我们的示例代码，html页面部分：

<form id="myForm">
 用户名：<input type="text" name="username">
 密码：<input type="text" name="password">
</form>
<button onclick="clickReset();">重置</button>

下面对reset事件进行两种实现，javascript与jquery实现，我都写在一块儿了，如下。

<script>
 function clickReset(){
  //方式一：js实现reset事件  
  //document.getElementById("myForm").reset();
  
  //方式二：jquery实现reset事件
  $("#myForm")[0].reset();
  
 }
</script>

但自定义reset重置表单事件实际应用中并不是点击事件的，所以我们可以将上面的重置方法写在页面初始化的地方，例如。

<script>
$(function(){ //页面初始化方法

  //方式一：js实现reset事件  
  //document.getElementById("myForm").reset();

  //方式二：jquery实现reset事件
  $("#myForm")[0].reset();

})
</script>

到此，关于“用JS如何实现reset重置表单事件”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络资讯站，小编每天都会给大家分享实用的文章!