歡迎關(guān)注微信公眾號(hào)： 程序員小圈圈
原文首發(fā)于： www.zhangruibin.com
本文出自于： RebornChang的博客
轉(zhuǎn)載請(qǐng)標(biāo)明出處^_^

彈出框動(dòng)態(tài)增加input輸入框

最近項(xiàng)目上有這么一個(gè)需求，一條訂單，我想動(dòng)態(tài)的輸入外部訂單號(hào)，支持輸入多個(gè)外部訂單號(hào)，當(dāng)外部訂單號(hào)為空的時(shí)候，可以新增外部訂單號(hào)。當(dāng)輸入過外部訂單號(hào)的時(shí)候，可以對(duì)外部訂單號(hào)進(jìn)行修改，也就是舊有外部訂單號(hào)要回顯。
那我們先來看一下效果吧：

這樣就涉及到一點(diǎn)前臺(tái)知識(shí)了：彈出層動(dòng)態(tài)增加input輸入框

首先說下前臺(tái)涉及的技術(shù)：
1.jQuery
2.bootstrap
3.layui
jQuery幫我們簡(jiǎn)化代碼，bootstrap提供一點(diǎn)基本的樣式，layui我們使用layer做彈出層以及l(fā)ayui的彈出層樣式。

那么確定好前臺(tái)界面使用的技術(shù)之后，我們開始編寫這么一個(gè)彈出層。

頁面聲明DIV

在引入了jQuery，bootstrap，layui的前提下，首先需要在頁面生成一個(gè)div然后我們使用js方法對(duì)其內(nèi)容進(jìn)行動(dòng)態(tài)的拼接展示：

<div id="index-div" class="site-text" style="margin: 5%; display: none"> </div>

點(diǎn)擊增加外部訂單號(hào)的時(shí)候觸發(fā)事件

function addOrderExternalNum(e) {var html = "";html += '<div class="form-group">';html += '<div class="col-sm-9 col-md-9 col-xs-9">';html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="請(qǐng)?zhí)钔獠坑唵尉幋a"/>';html += '</div>';html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';html += '<a href="javascript:;" class="addInputReturn" >';html += '<span class="glyphicon glyphicon-plus"></span>';html += '</a>';html += '</div>';html += '</div>';$("#index-div").append(html)//orderId，orderNum，是按鈕點(diǎn)擊事件獲取到的自定義參數(shù)var orderId = $(e).attr("orderId");var orderNum = $(e).attr("orderNum");//使用layer.open打開一個(gè)彈出層layer.open({type: 1 //Page層類型,skin: 'layui-layer-molv',area: ['30%', '380px'],title: ['添加外部訂單編碼','font-size:18px'],btn: ['確定', '關(guān)閉'],shadeClose: true,shade: 0 //遮罩透明度,maxmin: false //允許全屏最小化,content:$("#index-div"),success: function(){$('#bid').val("bid");$('#bname').val("bname");$('#price').val("price");},yes:function(index, layero){//alert("點(diǎn)擊了確定")//點(diǎn)擊確定按鈕，獲取填寫的值，然后校驗(yàn)，無誤后做后臺(tái)插入 var externalOrderNum='' //定義json對(duì)象var $inputArr = $('.externalOrderNum');//獲取class為resAccount的input對(duì)象var count = 0;var flag = false;var regu = "^[ ]+$";var re = new RegExp(regu);var temp = '';$inputArr.each(function(){//校驗(yàn)沒一個(gè)訂單編碼是否長度大于32位if ($(this).val().length > 32){layer.alert('外部訂單編碼長度應(yīng)小于32位');flag = false;return false;if ($(this).val().match(/^\s+$/) || $(this).val() ===''){flag = false;layer.alert('外部訂單編碼填寫不能為空');return false;}}else {if ($(this).val().match(/^\s+$/) || $(this).val() ==''){flag = false;layer.alert('外部訂單編碼填寫不能為空');return false;}else {//去掉兩端空格temp = $(this).val().replace(/(^\s*)|(\s*$)/g, "");externalOrderNum += temp + ";";flag = true;}}count++;})if (count > 16){layer.alert('外部訂單編碼數(shù)量應(yīng)小于16個(gè)');flag = false;return;}else {if (flag == true){//去掉字符串末尾的分號(hào)var lastIndex = externalOrderNum.lastIndexOf(";");if (lastIndex > -1) {externalOrderNum = externalOrderNum.substring(0, lastIndex) + externalOrderNum.substring(lastIndex + 1, externalOrderNum.length);//alert("入庫的時(shí)候外部訂單編碼為："+externalOrderNum);}//確認(rèn)添加的外部訂單編碼信息無誤后，調(diào)用ajax方法入庫insertExternalOrderNum(orderId,orderNum,externalOrderNum);}}},btn2: function(index, layero){//按鈕【按鈕三】的回調(diào)var html = "";$("#index-div").empty();},cancel: function(){//右上角關(guān)閉回調(diào)var html = "";$("#index-div").empty();}});};

重頭戲來了，也就是點(diǎn)擊input輸入框后面的+號(hào)或者-號(hào)綁定的事件：

/*** 動(dòng)態(tài)添加事件 */ $("body").on('click','.addInputReturn',function () {//添加減號(hào)var $content = "";$content += '<a href="javascript:;" class="delInput" >';$content += '<span class="glyphicon glyphicon-minus"></span>';$content += '</a>';$(this).parent().append($content);//去除加號(hào)this.remove();var html = "";html += '<div class="form-group">';html += '<div class="col-sm-9 col-md-9 col-xs-9">';html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="請(qǐng)?zhí)钔獠坑唵尉幋a"/>';html += '</div>';html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';html += '<a href="javascript:;" class="addInputReturn" >';html += '<span class="glyphicon glyphicon-plus"></span>';html += '</a>';html += '</div>';html += '</div>';$("#index-div").append(html) }); /*** 刪除事件 */ $("body").on('click','.delInput',function () {//獲取當(dāng)前點(diǎn)擊的元素的父級(jí)的父級(jí)進(jìn)行刪除$(this).parent().parent().remove(); })

以上就是點(diǎn)擊添加按鈕的操作，下面的是點(diǎn)擊修改按鈕的操作，修改比添加稍微麻煩一點(diǎn)，那就是原數(shù)據(jù)的回顯，以及對(duì)每回顯一條數(shù)據(jù)，數(shù)據(jù)后面的+號(hào)或者-號(hào)的判斷。

點(diǎn)擊修改外部訂單號(hào)的時(shí)候觸發(fā)事件

function updateOrderExternalNum(e) {var orderId = $(e).attr("orderId");var orderNum = $(e).attr("orderNum");var externalNum = $(e).attr("externalNum");//聲明計(jì)數(shù)器，var selCount = 0;var strs = new Array(); //定義一數(shù)組var html = "";//判斷是否包含分號(hào)，不包含的話，就是一個(gè)外部訂單編碼if (externalNum.indexOf(";") != -1){strs = externalNum.split(";"); //字符分割for (i=0; i<strs.length; i++ ){//document.write(strs[i]+"<br/>"); //分割后的字符輸出//根據(jù)分割的字符串，動(dòng)態(tài)拼接輸入框并回顯 //循環(huán)遍歷填充 if (selCount == strs.length-1){html += '<div class="form-group">';html += '<div class="col-sm-9 col-md-9 col-xs-9">';html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="請(qǐng)?zhí)钔獠坑唵尉幋a" value="'+strs[i]+'"/>';html += '</div>';html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';html += '<a href="javascript:;" class="addInputReturn" >';html += '<span class="glyphicon glyphicon-plus"></span>';html += '</a>';html += '</div>';html += '</div>';}else {html += '<div class="form-group">';html += '<div class="col-sm-9 col-md-9 col-xs-9">';html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="請(qǐng)?zhí)钔獠坑唵尉幋a" value="'+strs[i]+'"/>';html += '</div>';html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';html += '<a href="javascript:;" class="delInput" >';html += '<span class="glyphicon glyphicon-minus"></span>';html += '</a>';html += '</div>';html += '</div>';}selCount++;}}else {html += '<div class="form-group">';html += '<div class="col-sm-9 col-md-9 col-xs-9">';html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="請(qǐng)?zhí)钔獠坑唵尉幋a" value="'+externalNum+'"/>';html += '</div>';html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';html += '<a href="javascript:;" class="addInputReturn" >';html += '<span class="glyphicon glyphicon-plus"></span>';html += '</a>';html += '</div>';html += '</div>';}$("#index-div").append(html)layer.open({type: 1 //Page層類型,skin: 'layui-layer-molv',area: ['30%', '380px'],title: ['修改外部訂單編碼','font-size:18px'],btn: ['確定', '關(guān)閉'],shadeClose: true,shade: 0 //遮罩透明度,maxmin: false //允許全屏最小化,content:$("#index-div"),success: function(){$('#bid').val("bid");$('#bname').val("bname");$('#price').val("price");},yes:function(index, layero){//alert("點(diǎn)擊了確定")//點(diǎn)擊確定按鈕，獲取填寫的值，然后校驗(yàn)，無誤后做后臺(tái)插入 var externalOrderNum='' //定義json對(duì)象var $inputArr = $('.externalOrderNum');//獲取class為resAccount的input對(duì)象var count = 0;var flag = false;var regu = "^[ ]+$";var re = new RegExp(regu);var temp = '';$inputArr.each(function(){//校驗(yàn)沒一個(gè)訂單編碼是否長度大于32位if ($(this).val().length > 32){layer.alert('外部訂單編碼長度應(yīng)小于32位');flag = false;return false;if ($(this).val().match(/^\s+$/) || $(this).val() ==''){flag = false;layer.alert('外部訂單編碼填寫不能為空');return false;}}else {if ($(this).val().match(/^\s+$/) || $(this).val() ==''){flag = false;layer.alert('外部訂單編碼填寫不能為空');return false;}else {//去掉兩端空格temp = trim($(this).val());externalOrderNum += temp + ";";flag = true;}}count++;})if (count > 16){layer.alert('外部訂單編碼數(shù)量應(yīng)小于16個(gè)');flag = false;return;}else {if (flag == true){//去掉字符串末尾的分號(hào)var lastIndex = externalOrderNum.lastIndexOf(";");if (lastIndex > -1) {externalOrderNum = externalOrderNum.substring(0, lastIndex) + externalOrderNum.substring(lastIndex + 1, externalOrderNum.length);//alert("入庫的時(shí)候外部訂單編碼為："+externalOrderNum);}//確認(rèn)添加的外部訂單編碼信息無誤后，調(diào)用ajax方法入庫updateExternalOrderNum(orderId,orderNum,externalOrderNum);}}},btn2: function(index, layero){//按鈕【按鈕三】的回調(diào)var html = "";$("#index-div").empty();},cancel: function(){//右上角關(guān)閉回調(diào)var html = "";$("#index-div").empty();}});};

其實(shí)核心代碼沒有多少，上面那么多代碼主要是筆者業(yè)務(wù)邏輯判斷…

以上就是彈出框動(dòng)態(tài)增加input輸入框的前端頁面相關(guān)內(nèi)容了，希望對(duì)看到的 你有所幫助。

總結(jié)

以上是生活随笔為你收集整理的弹出框动态增加input输入框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。