我们都知道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>