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

前端技术 2023/09/09 JavaScript

本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作，供大家参考，具体内容如下

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

<div class=\"row\"> 
 <div class=\"col-lg-6\"> 
  <div class=\"input-group\"> 
   <span class=\"input-group-addon\"> 
    <input type=\"checkbox\" aria-label=\"...\"> 
   </span> 
   <input type=\"text\" class=\"form-control\" aria-label=\"...\"> 
  </div><!-- /input-group --> 
 </div><!-- /.col-lg-6 --> 
 <div class=\"col-lg-6\"> 
  <div class=\"input-group\"> 
   <span class=\"input-group-addon\"> 
    <input type=\"radio\" aria-label=\"...\"> 
   </span> 
   <input type=\"text\" class=\"form-control\" aria-label=\"...\"> 
  </div><!-- /input-group --> 
 </div><!-- /.col-lg-6 --> 
</div><!-- /.row -->

Demo案例的效果图：

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

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

使用inputGroup.js只要在对应的容器，如div中添加选择器，然后使用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\' : \"<span class=\\\"glyphicon glyphicon-plus\\\"></span>\", 
      \'del\' : \"<span class=\\\"glyphicon glyphicon-minus\\\"></span>\" 
    }, options); 
 
    var _this = $(this); 
 
    //添加序号为1的输入框组 
    addInputGroup(1); 
 
    /** 
     * 添加序号为order的输入框组 
     * @param order 输入框组的序号 
     */ 
    function addInputGroup(order) { 
      //1.创建输入框组 
      var inputGroup = $(\"<div class=\'input-group\' style=\'margin: 10px 0\'></div>\"); 
      //2.输入框组的序号 
      var inputGroupAddon1 = $(\"<span class=\'input-group-addon\'></span>\"); 
      //3.设置输入框组的序号 
      inputGroupAddon1.html(\" \" + order + \" \"); 
 
      //4.创建输入框组中的输入控件（input或textarea） 
      var widget = \'\', inputGroupAddon2; 
      if(c.widget == \'textarea\') { 
        widget = $(\"<textarea class=\'form-control\' style=\'resize: vertical;\'></textarea>\"); 
        inputGroupAddon2 = $(\"<span class=\'input-group-addon\'></span>\"); 
      } else if(c.widget == \'input\') { 
        widget = $(\"<input class=\'form-control\' type=\'text\'/>\"); 
        inputGroupAddon2 = $(\"<span class=\'input-group-btn\'></span>\"); 
      } 
 
      //5.创建输入框组中最后面的操作按钮 
      var addBtn = $(\"<button class=\'btn btn-default\' type=\'button\'>\" + c.add + \"</button>\"); 
      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

<!DOCTYPE html> 
<html lang=\"en\"> 
<head> 
  <meta charset=\"UTF-8\"> 
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> 
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> 
  <title>输入框组</title> 
  <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\" type=\"text/css\"> 
  <style> 
    /*.input-group-add .input-group { 
      margin: 10px 0; 
    }*/ 
  </style> 
 
  <!--<link href=\"assets/font-awesome/css/font-awesome.css\" rel=\"stylesheet\" />--> 
  <!--[if lt IE 9]> 
  <script src=\"js/html5shiv.js\"></script> 
  <script src=\"js/respond.min.js\"></script> 
  <![endif]--> 
</head> 
<body> 
  <div class=\"container\"> 
    <div class=\"input-group-add\"> 
      <!--<div class=\"input-group\"> 
        <span class=\"input-group-addon\"> 1 </span> 
        <!–<input type=\"text\" class=\"form-control\" aria-label=\"...\">–> 
        <textarea class=\"form-control\"></textarea> 
        <span class=\"input-group-addon\"> 
          <button class=\"btn btn-default\" type=\"button\"> + </button> 
        </span> 
      </div>--> 
    </div> 
  </div> 
 
  <script src=\"js/jquery-1.11.1.min.js\"></script> 
  <script src=\"js/bootstrap.min.js\"></script> 
  <script src=\"inputGroup.js\"></script> 
  <script> 
    $(function() { 
      $(\'.input-group-add\').initInputGroup({ 
        \'widget\' : \'textarea\', //输入框组中间的空间类型 
        /*\'add\' : \'添加\', 
        \'del\' : \'删除\'*/ 
      }); 
    }); 
  </script> 
</body> 
</html>

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

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

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

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

本文地址：https://www.stayed.cn/item/25337

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案