歡迎關注微信公眾號： 程序員小圈圈
原文首發于： www.zhangruibin.com
本文出自于： RebornChang的博客
轉載請標明出處^_^

彈出框動態增加input輸入框

最近項目上有這么一個需求，一條訂單，我想動態的輸入外部訂單號，支持輸入多個外部訂單號，當外部訂單號為空的時候，可以新增外部訂單號。當輸入過外部訂單號的時候，可以對外部訂單號進行修改，也就是舊有外部訂單號要回顯。
那我們先來看一下效果吧：

這樣就涉及到一點前臺知識了：彈出層動態增加input輸入框

首先說下前臺涉及的技術：
1.jQuery
2.bootstrap
3.layui
jQuery幫我們簡化代碼，bootstrap提供一點基本的樣式，layui我們使用layer做彈出層以及layui的彈出層樣式。

那么確定好前臺界面使用的技術之后，我們開始編寫這么一個彈出層。

頁面聲明DIV

在引入了jQuery，bootstrap，layui的前提下，首先需要在頁面生成一個div然后我們使用js方法對其內容進行動態的拼接展示：

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

點擊增加外部訂單號的時候觸發事件

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="請填外部訂單編碼"/>';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，是按鈕點擊事件獲取到的自定義參數var orderId = $(e).attr("orderId");var orderNum = $(e).attr("orderNum");//使用layer.open打開一個彈出層layer.open({type: 1 //Page層類型,skin: 'layui-layer-molv',area: ['30%', '380px'],title: ['添加外部訂單編碼','font-size:18px'],btn: ['確定', '關閉'],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("點擊了確定")//點擊確定按鈕，獲取填寫的值，然后校驗，無誤后做后臺插入 var externalOrderNum='' //定義json對象var $inputArr = $('.externalOrderNum');//獲取class為resAccount的input對象var count = 0;var flag = false;var regu = "^[ ]+$";var re = new RegExp(regu);var temp = '';$inputArr.each(function(){//校驗沒一個訂單編碼是否長度大于32位if ($(this).val().length > 32){layer.alert('外部訂單編碼長度應小于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('外部訂單編碼數量應小于16個');flag = false;return;}else {if (flag == true){//去掉字符串末尾的分號var lastIndex = externalOrderNum.lastIndexOf(";");if (lastIndex > -1) {externalOrderNum = externalOrderNum.substring(0, lastIndex) + externalOrderNum.substring(lastIndex + 1, externalOrderNum.length);//alert("入庫的時候外部訂單編碼為："+externalOrderNum);}//確認添加的外部訂單編碼信息無誤后，調用ajax方法入庫insertExternalOrderNum(orderId,orderNum,externalOrderNum);}}},btn2: function(index, layero){//按鈕【按鈕三】的回調var html = "";$("#index-div").empty();},cancel: function(){//右上角關閉回調var html = "";$("#index-div").empty();}});};

重頭戲來了，也就是點擊input輸入框后面的+號或者-號綁定的事件：

/*** 動態添加事件 */ $("body").on('click','.addInputReturn',function () {//添加減號var $content = "";$content += '<a href="javascript:;" class="delInput" >';$content += '<span class="glyphicon glyphicon-minus"></span>';$content += '</a>';$(this).parent().append($content);//去除加號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="請填外部訂單編碼"/>';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 () {//獲取當前點擊的元素的父級的父級進行刪除$(this).parent().parent().remove(); })

以上就是點擊添加按鈕的操作，下面的是點擊修改按鈕的操作，修改比添加稍微麻煩一點，那就是原數據的回顯，以及對每回顯一條數據，數據后面的+號或者-號的判斷。

點擊修改外部訂單號的時候觸發事件

function updateOrderExternalNum(e) {var orderId = $(e).attr("orderId");var orderNum = $(e).attr("orderNum");var externalNum = $(e).attr("externalNum");//聲明計數器，var selCount = 0;var strs = new Array(); //定義一數組var html = "";//判斷是否包含分號，不包含的話，就是一個外部訂單編碼if (externalNum.indexOf(";") != -1){strs = externalNum.split(";"); //字符分割for (i=0; i<strs.length; i++ ){//document.write(strs[i]+"<br/>"); //分割后的字符輸出//根據分割的字符串，動態拼接輸入框并回顯 //循環遍歷填充 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="請填外部訂單編碼" 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="請填外部訂單編碼" 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="請填外部訂單編碼" 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: ['確定', '關閉'],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("點擊了確定")//點擊確定按鈕，獲取填寫的值，然后校驗，無誤后做后臺插入 var externalOrderNum='' //定義json對象var $inputArr = $('.externalOrderNum');//獲取class為resAccount的input對象var count = 0;var flag = false;var regu = "^[ ]+$";var re = new RegExp(regu);var temp = '';$inputArr.each(function(){//校驗沒一個訂單編碼是否長度大于32位if ($(this).val().length > 32){layer.alert('外部訂單編碼長度應小于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('外部訂單編碼數量應小于16個');flag = false;return;}else {if (flag == true){//去掉字符串末尾的分號var lastIndex = externalOrderNum.lastIndexOf(";");if (lastIndex > -1) {externalOrderNum = externalOrderNum.substring(0, lastIndex) + externalOrderNum.substring(lastIndex + 1, externalOrderNum.length);//alert("入庫的時候外部訂單編碼為："+externalOrderNum);}//確認添加的外部訂單編碼信息無誤后，調用ajax方法入庫updateExternalOrderNum(orderId,orderNum,externalOrderNum);}}},btn2: function(index, layero){//按鈕【按鈕三】的回調var html = "";$("#index-div").empty();},cancel: function(){//右上角關閉回調var html = "";$("#index-div").empty();}});};

其實核心代碼沒有多少，上面那么多代碼主要是筆者業務邏輯判斷…

以上就是彈出框動態增加input輸入框的前端頁面相關內容了，希望對看到的 你有所幫助。

總結

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

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