基于Bootstrap使用jQuery实现输入框组input-group的添加

注意这里要求使用到Bootstrap框架的输入框组，如：

Demo案例的效果图：

这里提供自制的 插件 inputGroup.js

参数为可以设置 输入框组中中间的控件是文本域还是输入框；以及设置在输入框组右侧的操作的内容。

使用inputGroup.js只要在对应的容器，如p中添加选择器，然后使用jQuery获取该选择器对应的jQuery对象，调用 initInputGroup方法即可。
inputGroup.js

/**  * Created by DreamBoy on 2016/4/29.  */ $(function() {   $.fn.initInputGroup = function (options) {     //1.Settings 初始化设置     var c = $.extend({       'widget' : 'input',       'add' : "",       'del' : ""     }, options);      var _this = $(this);      //添加序号为1的输入框组     addInputGroup(1);      /**      * 添加序号为order的输入框组      * @param order 输入框组的序号      */     function addInputGroup(order) {       //1.创建输入框组       var inputGroup = $("
");       //2.输入框组的序号       var inputGroupAddon1 = $("");       //3.设置输入框组的序号       inputGroupAddon1.html(" " + order + " ");        //4.创建输入框组中的输入控件（input或textarea）       var widget = '', inputGroupAddon2;       if(c.widget == 'textarea') {         widget = $("");         inputGroupAddon2 = $("");       } else if(c.widget == 'input') {         widget = $("");         inputGroupAddon2 = $("");       }        //5.创建输入框组中最后面的操作按钮       var addBtn = $("" + c.add + "");       addBtn.appendTo(inputGroupAddon2).on('click', function() {         //6.响应删除和添加操作按钮事件         if($(this).html() == c.del) {           $(this).parents('.input-group').remove();         } else if($(this).html() == c.add) {           $(this).html(c.del);           addInputGroup(order+1);         }         //7.重新排序输入框组的序号         resort();       });        inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);        _this.append(inputGroup);     }      function resort() {       var child = _this.children();       $.each(child, function(i) {         $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');       });     }   } }); 

Demo案例——InputGroupDemo
目录结构如下：

index.html

                                
     
            
   
    <script src="js/jquery-1.11.1.min.js?1.1.9">《script》   <script src="js/bootstrap.min.js?1.1.9">《script》   <script src="inputGroup.js?1.1.9">《script》   《script》     $(function() {       $('.input-group-add').initInputGroup({         'widget' : 'textarea', //输入框组中间的空间类型         /*'add' : '添加',         'del' : '删除'*/       });     });   《script》   

如果输入框组中的中间控件需要input，则可以设置：

$('.input-group-add').initInputGroup({         'widget' : 'input', //输入框组中间的空间类型         /*'add' : '添加',         'del' : '删除'*/       }); 

或者不进行设置，因为默认中间控件为input。
中间控件为input的效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助。