提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery实现输入框动态增减的实例代码

jQuery实例代码 实现 动态 输入框 增减
2023-06-13 09:15:03 时间
通过字符串拼接，将所有的输入框中的内容，用“1234235#34634234#123525”这样的格式拼接。
网页端代码：
复制代码代码如下:

<form>
<table>
<tr><th>手机：</th>
   <tdstyle="padding:10px0;">
   <inputtype="hidden"name="user.mobile"value="124213#243463"id="mobile"/>
   <divid="mobile_s_div">
   <inputtype="text"id="mobile_t"name="mobile_t"value="%{#session.user.mobile}"onchange="checkMobilephone(this)"onkeyup="checkMobilephone(this)"/>
   <span></span>
   </div>
   <divid="mobile_div"></div>
   <inputtype="submit"onclick="returnaddinput("mobile_s_div","mobile_div","")"value="再添加一个"></input>
   </td>
</tr>
</table>
</form>

js代码：
复制代码代码如下:

$(function(){
   //初始化
   initFields();
});
functioninitFields(){
   //初始化手机
   vartext=$("#mobile").val();
   varss=text.split("#");
   if(ss.length>0){
       $("#mobile_t").val(ss[0]);
   }
   for(vari=1;i<ss.length;i++){
      addinput("mobile_s_div","mobile_div",ss[i]);
   }
}
/**
字符串拼接
src_id是源input的name，dist_id是目标input的id值
*/
functioncompose(src_name,dist_id){
   varstr="";
   varss=$("input[name="+src_name+"]").each(function(i){
       if($(this).val()!="")
           str+="#"+$(this).val();
   });
   str=str.substring(1,str.length);
   $("#"+dist_id).val(str);
}
/**
克隆一个input，显示在指定的容器内
*/
functionaddinput(id,div_id,text){
   varmobile_div=$("#"+id).clone();
   mobile_div.children("input").val(text);
   vardelbt=$("<inputtype="button"value="删除"></input>")
   delbt.bind("click",function(){$(this).parent().remove()});
   mobile_div.append(delbt)
   $("#"+div_id).append(mobile_div);
   returnfalse;
}
functioncheck1(){
   compose("mobile_t","mobile");
}
//<inputtype="text"onkeyup="checkMobilephone(this)"/><span/>
functioncheckMobilephone(obj){
   if(obj==null){
       returnfalse;
   }
   varspan=$(obj).parent().children("span");
   varstr=obj.value;
   if(str==""){
       span.text("");
       $(obj).removeClass("inputError");
       returnfalse;
   }
   varpattern= /^1\d{10}$/;
   if(!pattern.exec(obj.value)){//不匹配,进行处理
       span.text("手机号码填写错误!").css("color","red");
       $(obj).addClass("inputError");
       returnfalse;
   }else{
       span.text("");
       $(obj).removeClass("inputError");
   }
}

把js文件引入html文件
1
复制代码代码如下:
<scripttype="text/javascript"src="js/jquery-1.6.4.min.js"></script>

2
复制代码代码如下:
<scripttype="text/javascript"src="js/index.js"></script>

相关文章