微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：jQuery作者：编程之家

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

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

rush:xhtml;">
Box" aria-label="...">
dio" aria-label="...">

Demo案例的效果图：

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

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

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

rush: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 = $("");
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

rush:xhtml;"> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> 输入框组 /*.input-group-add .input-group { margin: 10px 0; }*/