java语言 百分网手机站

JavaScript重置表单的实现

时间:2020-10-17 16:21:52 java语言 我要投稿

JavaScript重置表单的实现

  如何实现表单的重置呢?下面是小编提供给大家的.JavaScript重置表单的实现,大家可以参考阅读,更多详情请关注应届毕业生考试网。

  在用户单击重置按钮时,表单会被重置。使用type特性值为“reset”的<input>或<button>都可以创建重置按钮,如下面的例子所示:

  <!--通用重置按钮-->

  <input type="reset" value="重置">

  <!--自定义重置按钮-->

  <button type="reset">提交</button>

  这两个按钮都可以用来重置表单。在重置表单时,所有表单字段都会回复到页面刚加载完毕时的初始值。如果某个字段的初始值为空,就会恢复为空;而带有默认值的字段,也会恢复默认值。

  用户单击重置按钮重置表单时,会触发reset事件。利用这个机会,我们可以在必要时取消重置操作。例如,以下展示了阻止重置表单的代码:

  var EventUtil = {

  addHandler: function (element, type, handler) {

  if (element.addEventListener) {

  element.addEventListener(type, handler, false);

  } else if (element.attachEvent) {

  element.attachEvent("on" + type, handler);

  } else {

  element["on" + type] = handler;

  }

  },

  getEvent: function (event) {

  return event ? event : window.event;

  },

  preventDefault: function (event) {

  if (event.preventDefault) {

  event.preventDefault();

  } else {

  event.returnValue = false;

  }

  }

  };

  var form = document.getElementById("myForm");

  EventUtil.addHandler(form, "reset", function () {

  //取得事件对象

  event = EventUtil.getEvent(event);

  //阻止表单重置

  EventUtil.preventDefault(event);

  });

  与提交表单一样,也可以通过JavaScript来重置表单,如下面的例子所示:

  var form = document.getElementById("myForm");

  //重置表单

  form.reset();

  与调用submit()方法不同,调用reset()方法会像单击重置按钮一样触发reset事件。

【JavaScript重置表单的实现】相关文章:

1.PHP中的表单处理

2.PHP 表单验证方法

3.如何重置路由器

4.表单设计的新规则

5.如何重置win7系统

6.php防止表单重复提交的方法

7.Dreamweaver如何检查表单

8.form表单中属性及功能应用

9.价格鉴证师《理论与实务辅导》:重置成本的划分