jquery实现输入框动态增减的实例代码


Posted in Javascript onJuly 14, 2013

通过字符串拼接,将所有的输入框中的内容,用“1234235#34634234#123525”这样的格式拼接。
网页端代码:

<form>
<table>
<tr><th>手机:</th>
    <td style="padding:10px 0;">
    <input type="hidden" name="user.mobile" value="124213#243463" id="mobile"/>
    <div id="mobile_s_div">
    <input type="text" id="mobile_t" name="mobile_t" value="%{#session.user.mobile}" onchange="checkMobilephone(this)" onkeyup="checkMobilephone(this)"/>
    <span></span>
    </div>
    <div id="mobile_div"></div>
    <input type="submit" onclick="return addinput('mobile_s_div', 'mobile_div', '')" value='再添加一个' ></input>
    </td>
</tr>
</table>
</form>

js代码:
$(function() {
    //初始化
    initFields();
});
function initFields(){
    //初始化手机
    var text = $('#mobile').val();
    var ss=text.split("#");
    if(ss.length>0){
        $('#mobile_t').val(ss[0]);
    }
    for(var i=1;i<ss.length;i++){
       addinput('mobile_s_div', 'mobile_div',ss[i]);
    }
}
/**
字符串拼接
src_id 是源input的name,dist_id是目标input的id值
*/
function compose(src_name, dist_id){
    var str="";
    var ss = $('input[name='+src_name+']').each(function(i){
        if($(this).val() != "")
            str+='#'+$(this).val();
    });
    str=str.substring(1,str.length);
    $('#'+dist_id).val(str);
}
/**
克隆一个input,显示在指定的容器内
*/
function addinput(id, div_id, text){
    var mobile_div=$('#'+id).clone();
    mobile_div.children('input').val(text);
    var delbt=$("<input type='button' value='删除'></input>")
    delbt.bind("click", function(){$(this).parent().remove()});
    mobile_div.append(delbt)
    $('#'+div_id).append(mobile_div);
    return false;
}
function check1(){
    compose('mobile_t', 'mobile');
}
//<input type="text" onkeyup="checkMobilephone(this)"/><span/>
function checkMobilephone(obj){
    if(obj == null){
        return false;
    }
    var span = $(obj).parent().children('span');
    var str = obj.value;
    if(str==""){
        span.text('');
        $(obj).removeClass("inputError");
        return false;
    }
    var pattern =  /^1\d{10}$/;
    if (!pattern.exec(obj.value)){//不匹配,进行处理
        span.text('手机号码填写错误!').css("color","red");
        $(obj).addClass("inputError");
        return false;
    }else {
        span.text('');
        $(obj).removeClass("inputError");
    }
}

把js文件引入html文件
1
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

2
<script type="text/javascript" src="js/index.js"></script>
Javascript 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
js确定对象类型方法
Mar 30 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
javascript获取隐藏dom的宽高 具体实现
Jul 14 #Javascript
js和as的稳定传值问题解决
Jul 14 #Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 #Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 #Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 #Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 #Javascript
js confirm()方法的使用方法实例
Jul 13 #Javascript
You might like
php仿ZOL分页类代码
2008/10/02 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
easyUI combobox实现联动效果
2017/01/17 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python随机读取文件实现实例
2017/05/25 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
程序员岗位职责
2013/11/11 职场文书
零件设计自荐信范文
2013/11/27 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书