手工實現表單重置的部分功能

首先我必須說幾乎所有的人都不需要自己實現表單重置的功能,表單重置功能只需要一個reset類型的input就足夠了。<input type="reset" />

當你萬不得已時,不妨考慮下我下面的做法,但必須做下提醒,以下代碼不可取,而當你的表單中使用到的控件不多時,或者你有其他辦法時,那麼就無須浪費時間閱讀下面的代碼了

function resetForm(ele) {
    $(ele).closest('table').find('input, select').val(function(){
        if(this.tagName == 'SELECT'){
            var options = this.options;
            var that = this;
            for(var i = 0; i < options.length; i++) {
                if(options[i].defaultSelected){
                    return options[i].value;
                }
            }
            return options[0].value;
        }
        return this.defaultValue;
    }); 
}

我先放上來我正在使用的代碼,需要引入jQuery,因此就沒有通用性,另外代碼中還包含JavaScript原生代碼,兩種混雜屬不可取的地方

resetForm方法在HTML代碼中調用大概是: <input type="button" onclick="resetForm(this)" />

resetForm方法中只嘗試將inputselect重置爲默認值,input類型的比較簡單,直接取該對象的defaultValue(此處我竟然不知道這個對象是不是DOM對象);對於select類型需要對它的所有option進行遍歷,判斷是否是默認選擇(defaultSelected),然後返回該option的值。實際上如果知道哪個option是默認選擇項,也可以將option的序號賦值給select對象的selectedIndex屬性而達到重置的效果。

表單中還可能使用radiocheckbox等控件,這裏並沒有打算拓展resetForm功能,不過我認爲,這些控件都可以通過它們的默認值(defaultValue)或者默認選擇(defaultSelected)相關信息進行重置吧。 (還真無聊)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章