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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue中element 上传功能的实现思路
Jul 06 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
原生JS无缝滑动轮播图
Oct 22 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
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
javascript实现网页字符定位的方法
2015/07/14 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python使用pymysql小技巧
2017/06/04 Python
Python星号*与**用法分析
2018/02/02 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
Python中pass的作用与使用教程
2020/11/13 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
自荐信怎么写好
2013/11/11 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
党课培训主持词
2014/04/01 职场文书
小学语文课后反思精选
2014/04/25 职场文书
大学生新学期计划书
2014/04/28 职场文书
领导班子四风表现材料
2014/08/23 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
员工工作能力评语
2014/12/31 职场文书
神农溪导游词
2015/02/11 职场文书
会计专业求职信范文
2015/03/19 职场文书
个人廉政承诺书
2015/04/28 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server