2019獨角獸企業重金招聘Python工程師標準>>>

主要功能是動態增減輸入框，而且支持對各個輸入框的檢測。
每個輸入框在輸入內容后，對其進行錯誤提示
最后通過字符串拼接，將所有的輸入框中的內容，用“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文件

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/index.js"></script>

轉載于:https://my.oschina.net/kingfire/blog/32531

總結

以上是生活随笔為你收集整理的jquery实现输入框动态增减的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。