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 jQuery $.post $.ajax用法
Jul 09 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
原生JavaScript实现留言板
Jan 10 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图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python通过future处理并发问题
2017/10/17 Python
pygame实现简易飞机大战
2018/09/11 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
英语文学专业学生的自我评价
2013/10/31 职场文书
婚前财产公证书
2014/04/10 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
解除租房协议书
2014/12/03 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
信用卡工作证明范本
2015/06/19 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
PHP基本语法
2021/03/31 PHP
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
python中%格式表达式实例用法
2021/06/18 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis