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事件列表解说
Dec 22 Javascript
几款极品的javascript压缩混淆工具
May 16 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python中使用SAX解析xml实例
2014/11/21 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
保安自我鉴定范文
2013/12/08 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
中学生班主任评语
2014/01/30 职场文书
投标保密承诺书
2014/05/19 职场文书
工厂车间标语
2014/06/19 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
研究生简历自我评
2015/03/11 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
市场营销计划书
2019/04/24 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技