欢迎关注微信公众号： 程序员小圈圈原文首发于：
本文出自于： 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输入框的前端页面相关内容了，希望对看到的 你有所帮助。
