最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

reset事件使用详解|jquery教程

JS/CSS 太平洋学习网 浏览 评论

 我们都知道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>
来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/1117/386.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论