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

本文实例为大家分享使用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

输入框组

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

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

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

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

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