脚本宝典收集整理的这篇文章主要介绍了js实例教程-jquery实现输入框动态增减的实例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

通过字符串拼接，将所有的输入框中的内容，用“1234235#34634234#123525”这样的格式拼接。
网页端代码：

. 代码如下:

<form>
<table>
<tr><th>手机：</th>
    <td style="padding:10px 0;">
    <input type="hidden" name="user.mobile" value="124213#243463" id="mobile"/>
    <p id="mobile_s_p">
    <input type="text" id="mobile_t" name="mobile_t" value="%{#session.user.mobile}" onchange="checkMobilephone(this)" onkeyup="checkMobilephone(this)"/>
    <span></span>
    </p>
    <p id="mobile_p"></p>
    <input type="submit" onclick="return addinput('mobile_s_p', 'mobile_p', '')" 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_p', 'mobile_p',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, p_id, text){
    var mobile_p=$('#'+id).clone();
    mobile_p.children('input').val(text);
    var delbt=$("<input type='button' value='删除'></input>")
    delbt.bind("click", function(){$(this).parent().remove()});
    mobile_p.append(delbt)
    $('#'+p_id).append(mobile_p);
    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技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jquery实现输入框动态增减的实例代码全部内容，希望文章能够帮你解决js实例教程-jquery实现输入框动态增减的实例代码所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。