用JS如何实现reset重置表单事件

来源：恒创科技编辑：恒创科技编辑部

2024-01-29 10:56:59

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

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

<inputtype="reset">

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

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

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

<formid="myForm">
用户名：<inputtype="text"name="username">
密码：<inputtype="text"name="password">
</form>
<buttononclick="clickReset();">重置</button>

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

<script>
functionclickReset(){
//方式一：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重置表单事件”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注恒创科技资讯站，小编每天都会给大家分享实用的文章!

本文地址：https://www.henghost.com/jishu/20046/