jQuery套件-檢查頁面的欄位是否有變更

Posted on 2010-10-20 21:56 黃偉榮阅读(493) 评论(0) 编辑收藏举报

有時會在修改頁面中，檢查頁面的的欄位(text、checkbox、radio、select)，沒有沒修改過，如果沒有修改，按下送出，此時是關閉視窗或轉頁，省去post出去，sever檢查與寫資料庫。

這是小弟我自製的jQuery套件，有二種使用方式

//這二個方法是同樣的，都是檢查頁面上所有:input,有沒有修改
$.hasChanged();
$(":input").hasChanged();
//也可以自訂Selector
$("#form1 input").hasChanged();

我是用input的屬性defaultValue、defaultChecked與option的defaultSelected查檢有沒有變更，這幾個值是在下載HTML就決定好的，如果是頁面載入完後用javascript賦值，因為預設值一定都是空的，所以會被認為有修改過。

/*
程式功能只有一個檢查頁面上的element有沒有修改過,true為有修改過,false為沒有修改過
使用方式有二種
$.hasChanged() 檢查:input有沒有修改過
$(selector).hasChanged() 檢查selector子的元素有沒有修改過
*/
(function ($) {
    $.hasChanged = function () {
        return $(":input").hasChanged();
    }
 
    $.fn.hasChanged = function () {
        for (var i = 0; i < this.length; i++) {
            var input = this[i];
            if (input.type == "checkbox" || input.type == "radio") {
                if (checkCheckBoxAndRadio(input)) {
                    return true;
                }
            } else if (typeof (input.defaultValue) != "undefined") {
                if (chekcInput(input)) {
                    return true;
                }
            } else if (input.type == "select-one") {
                if (checkSelectOne(input)) {
                    return true;
                }
            } else if (input.type == "select-multiple") {
                if (checkSelectMultiple(input)) {
                    return true;
                }
            } else {
                alert("不支援" + input.type);
                return false;
            }
        }
 
        return false;
    }
 
    function checkSelectOne(input) {
        //下拉選單零筆，不考慮
        if (input.options.length == 0) {
            return false;
        }
 
        var defaultIndex = 0;
        for (var j = 1; j < input.options.length; j++) {
            var option = input.options[j];
            if (option.defaultSelected) {
                defaultIndex = j;
                break;
            }
        }
 
        return defaultIndex != input.selectedIndex;
    }
 
 
    function checkSelectMultiple(input) {
        //下拉選單零筆，不考慮
        if (input.options.length == 0) {
            return false;
        }
 
        for (var j = 0; j < input.options.length; j++) {
            var option = input.options[j];
            if (option.defaultSelected != option.selected) {
                return true;
            }
        }
 
        return false
    }
 
    function checkCheckBoxAndRadio(input) {
        //checkbox與radio，比有沒有Checked
        return input.checked != input.defaultChecked;
    }
 
    function chekcInput(input) {
        return input.value != input.defaultValue;
    }
})(jQuery)

NOTE:

defaultValue是有一次我按下reset的按鈕時，發現所有的值都還原成預設值，而不是空的，我就很好奇的瀏覽器是怎麼記錄這些值的，就不小心讓我發現defaultValue這個屬性，所以如果想局部還原，可以用input.value=input.defaultValue

測試瀏覽器

IE 8 OK

Chrome 6 OK

Firefox 3.5 OK

NOTE:

有一個很像Bug又不是Bug的東西，請在用時，注意一下

?
1
2
3
4
5
6
7
8

<select>
    <option selected>1</option>
    <option selected>2</option>
    <option selected>3</option>
    <option selected>4</option>
    <option selected>5</option>
</select>