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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
vue实现百度搜索功能
Dec 28 Javascript
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
python正则分组的应用
2013/11/10 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
中学清明节活动总结
2014/07/04 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
小区保洁员岗位职责
2015/04/10 职场文书