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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

web前端开发初学者十问集锦(1)

答:script标签可以放置在html文件的任何地方(any where),比如既可以放置在html标签外,也可以放置在head内,也可以放置在body内,也可...

9110
来自专栏程序生活

括号配对问题描述输入输出样例输入样例输出解析代码实现运行结果参考链接

括号配对问题-题目链接 描述 现在,有一行括号序列,请你检查这行括号是否配对。 输入 第一行输入一个数N(0<N<=100),表示有N组测试数据。后面的N行输入...

34050
来自专栏LanceToBigData

SpringBoot(四)之thymeleaf的使用

这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎。...

648100
来自专栏数据结构与算法

2833 奇怪的梦境

题目描述 Description Aiden陷入了一个奇怪的梦境:他被困在一个小房子中,墙上有很多按钮,还有一个屏幕,上面显示了一些信息。屏幕上说,要将所有按钮...

37650
来自专栏葡萄城控件技术团队

CoffeeScript和Sass提高Web开发效率

如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已经开始感觉到JavaScript的关键字 var, function, {} ...

23970
来自专栏软件开发

前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

646100
来自专栏Golang语言社区

golang(Go语言) byte/[]byte 与 二进制形式字符串 互转

效果 把某个字节或字节数组转换成字符串01的形式,一个字节用8个”0”或”1”字符表示。比如: byte(3) –> “00000011” []byte{1...

51370
来自专栏对角另一面

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。 在阅读本...

20800
来自专栏MixLab科技+设计实验室

设计师编程指南之Sketch插件开发 9 之 Shape中的oval

往期文章索引: 1 / 入门基本概念、page的相关操作 2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操...

32270
来自专栏漫漫前端路

在 Vue 中使用 TypeScript 的一些思考(实践)

两种形式输出结果一致,同是创建一个 Vue 子类,但在书写组件选项如 props,mixin 时,有些不同。特别是当你使用 Vue.extend() 时,为了让...

41720

扫码关注云+社区

领取腾讯云代金券