首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手工实现表单重置的部分功能

手工实现表单重置的部分功能

作者头像
用户3579639
发布2018-10-22 15:03:27
9890
发布2018-10-22 15:03:27
举报

首先我必须说几乎所有的人都不需要自己实现表单重置的功能,表单重置功能只需要一个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)相关信息进行重置吧。 (还真无聊)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档