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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
详解vue项目构建与实战
Jun 27 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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/01/08 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL