jquery.form.js用法之清空form的方法


Posted in Javascript onMarch 07, 2014

本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用。
该段代码言简意赅可以很好的作为学习参考。

/**
 * Clears the form data. Takes the following actions on the form's input fields:
 * - input text fields will have their 'value' property set to the empty string
 * - select elements will have their 'selectedIndex' property set to -1
 * - checkbox and radio inputs will have their 'checked' property set to false
 * - inputs of type submit, button, reset, and hidden will *not* be effected
 * - button elements will *not* be effected
 */
$.fn.clearForm = function(includeHidden) {
    return this.each(function() {
        $('input,select,textarea', this).clearFields(includeHidden);   //this表示设置上下文环境,有多个表单时只作用调用的表单
    });
};
$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase();
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        } 
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                 $(this).replaceWith($(this).clone(true));
            } else {
                 $(this).val('');
            }
       }
        else if (includeHidden) {
            // includeHidden can be the value true, or it can be a selector string
            // indicating a special test; for example:
            // $('#myForm').clearForm('.special:hidden')
            // the above would clean hidden inputs that have the class of 'special'
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) ) {
                this.value = '';
            }
        }
    });
};
Javascript 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JS实现拖动示例代码
Nov 01 Javascript
js读写json文件实例代码
Oct 21 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 #Javascript
jquery 实现两级导航菜单附效果图
Mar 07 #Javascript
document.addEventListener使用介绍
Mar 07 #Javascript
开发中可能会用到的jQuery小技巧
Mar 07 #Javascript
javascript匿名函数应用示例介绍
Mar 07 #Javascript
js登录弹出层特效
Mar 07 #Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python3制作捧腹网段子页爬虫
2017/02/12 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python使用wxPython实现计算器
2018/01/30 Python
python实现类之间的方法互相调用
2018/04/29 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
大学生职业生涯规划书模板
2014/01/03 职场文书
党建工作先进材料
2014/05/02 职场文书
社区服务活动小结
2014/07/08 职场文书
卖车协议书范例
2014/09/16 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
企业催款函范本
2015/06/24 职场文书
圣诞晚会主持词
2015/07/01 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS