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

发布时间：2020-12-17 20:59:07 所属栏目：安全来源：网络整理

导读：? ? ? ?注意这里要求使用到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-lab

? ? ? ?注意这里要求使用到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案例的效果图：

? ? ? ?点击添加按钮，添加多行输入框组：

? ? ? ?点击第3个输入框组的删除按钮进行删除：

? ? ? ?第3个输入框组就被删除了。

? ? ? ?这里提供自制的插件 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','del' : '删除'*/
            });

? ? ? ?或者不进行设置，因为默认中间控件为input。

? ? ? ?中间控件为input的效果如下：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!