JavaScript判斷用戶(hù)是否對(duì)表單進(jìn)行了修改的方法
本文實(shí)例講述了JavaScript判斷用戶(hù)是否對(duì)表單進(jìn)行了修改的方法。分享給大家供大家參考。具體分析如下:
這段JS代碼可以判斷出用戶(hù)是否對(duì)表單內(nèi)容進(jìn)行了修改,如果修改了表單,并退出瀏覽器,則會(huì)提醒用戶(hù)是否要保存表單的內(nèi)容,是非常有用的代碼。
function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox" || type == "radio") { if (element.checked != element.defaultChecked) { return true; } } else if (type == "hidden" || type == "password" || type == "text" || type == "textarea") { if (element.value != element.defaultValue) { return true; } } else if (type == "select-one" || type == "select-multiple") { for (var j = 0; j < element.options.length; j++) { if (element.options[j].selected != element.options[j].defaultSelected) { return true; } } } } return false; }
使用示例:當(dāng)退出瀏覽器是,如果用戶(hù)修改了表單,則提醒用戶(hù)是否要保存
window.onbeforeunload = function(e) { e = e || window.event; if (formIsDirty(document.forms["someForm"])) { // For IE and Firefox if (e) { e.returnValue = "You have unsaved changes."; } // For Safari return "You have unsaved changes."; } };
下面是一個(gè)完整的范例代碼
<form name="fooForm">
<input type="text" name="t"><br>
<input type="text" name="2" value="default"><br>
<select name="some">
<option value="fooo" selected="">foo</option>
<option value="bar">bar</option>
</select><br>
</form>
<button onclick="alert(formIsDirty(document.fooForm))">Click to check if Form is Dirty</button>
<br>
<script>
function formIsDirty(form) {
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
if (element.checked != element.defaultChecked) {
return true;
}
}
else if (type == "hidden" || type == "password" ||
type == "text" || type == "textarea") {
if (element.value != element.defaultValue) {
return true;
}
}
else if (type == "select-one" || type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected !=
element.options[j].defaultSelected) {
return true;
}
}
}
}
return false;
}
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
初學(xué)js插入節(jié)點(diǎn)appendChild insertBefore使用方法
由于可見(jiàn)insertBefore()方法的特性是在已有的子節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)但是兩種情況結(jié)合起來(lái)發(fā)現(xiàn)insertBefore()方法插入節(jié)點(diǎn),是可以在子節(jié)點(diǎn)列表的任意位置。2011-07-07js實(shí)現(xiàn)網(wǎng)頁(yè)抽獎(jiǎng)實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)抽獎(jiǎng)的方法,實(shí)例分析了javascript隨機(jī)數(shù)及時(shí)間函數(shù)的相關(guān)使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08跟我學(xué)習(xí)javascript的浮點(diǎn)數(shù)精度
跟我學(xué)習(xí)javascript的浮點(diǎn)數(shù)精度,帶大家真正的理解JavaScript的浮點(diǎn)數(shù),提醒大家當(dāng)心浮點(diǎn)運(yùn)算中的精度陷阱,需要的朋友可以參考下2015-11-11JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼,通過(guò)鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
本篇文章小編為大家介紹,關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法,有需要的朋友可以參考一下2013-04-04

javascript中的event loop事件循環(huán)詳解