知识大全 jquery实现输入框动态增减的实例代码

Posted 2022-07-20 知

篇首语：木尺虽短，能量千丈。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jquery实现输入框动态增减的实例代码相关的知识，希望对你有一定的参考价值。

主要功能是动态增减输入框而且支持对各个输入框的检测每个输入框在输入内容后对其进行错误提示

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

复制代码代码如下: <form> <table> <tr><th>手机 </th> <td > <input type=hidden name=user mobile value=" # " 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> ) $( #mobile_t ) val(ss[ ]); for(var i= ;i<ss length;i++) addinput( mobile_s_div mobile_div ss[i]); /** 字符串拼接 src_id 是源input的name dist_id是目标input的id值 */ function pose(src_name dist_id) var str=""; var ss = $( input[name= +src_name+ ] ) each(function(i) if($(this) val() != "") str+= # +$(this) val(); ); str=str substring( 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 check () pose( 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 = /^ d $/; if (!pattern exec(obj value))//不匹配进行处理 span text( 手机号码填写错误! ) css("color" "red"); $(obj) addClass("inputError"); return false; else span text( ); $(obj) removeClass("inputError");

　　把js文件引入文件

复制代码代码如下: <script type=text/javascript src=js/jquery min js></script>

复制代码代码如下: cha138/Article/program/Java/JSP/201311/20493