- 相關(guān)推薦
JavaScript重置表單的實(shí)現(xiàn)
如何實(shí)現(xiàn)表單的重置呢?下面是小編提供給大家的JavaScript重置表單的實(shí)現(xiàn)，大家可以參考閱讀，更多詳情請關(guān)注應(yīng)屆畢業(yè)生考試網(wǎng)。
在用戶單擊重置按鈕時(shí)，表單會(huì)被重置。使用type特性值為“reset”的<input>或<button>都可以創(chuàng)建重置按鈕，如下面的例子所示：
<!--通用重置按鈕-->
<input type="reset" value="重置">
<!--自定義重置按鈕-->
<button type="reset">提交</button>
這兩個(gè)按鈕都可以用來重置表單。在重置表單時(shí)，所有表單字段都會(huì)回復(fù)到頁面剛加載完畢時(shí)的初始值。如果某個(gè)字段的初始值為空，就會(huì)恢復(fù)為空；而帶有默認(rèn)值的字段，也會(huì)恢復(fù)默認(rèn)值。
用戶單擊重置按鈕重置表單時(shí)，會(huì)觸發(fā)reset事件。利用這個(gè)機(jī)會(huì)，我們可以在必要時(shí)取消重置操作。例如，以下展示了阻止重置表單的代碼：
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();
與調(diào)用submit()方法不同，調(diào)用reset()方法會(huì)像單擊重置按鈕一樣觸發(fā)reset事件。
【JavaScript重置表單的實(shí)現(xiàn)】相關(guān)文章：
兩種實(shí)現(xiàn)表單驗(yàn)證的javascript方法09-19
javascript實(shí)現(xiàn)小球的自由移動(dòng)代碼08-26
JavaScript如何實(shí)現(xiàn)JSON.stringify09-19
基于PHP+Ajax實(shí)現(xiàn)表單驗(yàn)證的詳解08-22
Javascript到PHP加密通訊的簡單實(shí)現(xiàn)07-23
如何使用JavaScript實(shí)現(xiàn)倒計(jì)時(shí)10-14
如何使用JavaScript實(shí)現(xiàn)頁面定時(shí)跳轉(zhuǎn)10-18