bootstrap 通过加减按钮实现输入框组功能

2024-08-06 16:19:06

实现效果图如下：

当我点击 + 按钮时，会添加一行输入框组；当点击 - 按钮时，会删除这一行输入框组

html代码如下：

<div class="input-group" id="centerIpGroup">
  <label class="input-group-addon" id="basic-addon5">中心机IP:</label>
  <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" disabled><span class="glyphicon glyphicon-plus"></span></button>
</div>

+ 按钮点击触发事件函数：

//添加中心机IP输入框项
  function addCenterIpGrp(obj){
    html = '<div class="input-group centerIp">'+
          '<label class="input-group-addon">IP：</label>'+
          '<input type="text" class="form-control" id="ipInput">'+
          '<label class="input-group-addon">注释：</label>'+
          '<input type="text" class="form-control" id="descInput">'+
          '<span class="input-group-btn">'+
                '<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button>'+
          '</span>'+
        '</div>'
    obj.insertAdjacentHTML('beforebegin',html)
  }

- 按钮点击触发事件函数：

$(document).on('click','#delCenterIpGrp',function(){
  var el = this.parentNode.parentNode
  var centerIp = $(this).parent().parent().find('#ipInput').val()
  alertify.confirm('您确定要删除选中的命令？',
  function(e){
    if(e){ el.parentNode.removeChild(el)}})})

总结

以上所述是小编给大家介绍的bootstrap 加减删除输入框组，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

bootstrap布局中input输入框右侧图标点击功能

使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的: 那么问题来了,怎样让这些小图标能够获得点击事件呢? 我也不知道,但是可以用一种迂回的方式,来间接的实现该功能. ***重点来了: 解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框:相当于给小图标盖了一个透明的被子: 复制代码代码如下: <di
bootstrap下拉列表与输入框组结合的样式调整

输入框组默认是div.input-group 已知可在input表单元素前后加入两类元素[分别是文本和按钮]如下所示: div.input-group-addon{文字或符号} input.form-control div.input-group-btn 其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单) 一.基本用法如下: <div class="input-group"> <span class="input-group-addon">@&l
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

Bootstrap 弹出框modal上层的输入框不能获得焦点问题,具体内容如下 1.在使用Bootstrap框架中目前modal弹出框只支持一层即在当前弹出框上不能再使用modal弹出框. 如果使用自定义的弹出框,例如:http://my.oschina.net/tianma3798/blog/737232 如果自定义弹出框中有input输入框,如果input 输入框不能获得焦点,则可能原因如下: 许多使用定义弹出层 <div class="modal fade" tabind
基于Bootstrap重置输入框内容按钮插件

当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可. text password email url search tel number datetime 使用方法使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作,供大家参考,具体内容如下注意这里要求使用到Bootstrap框架的输入框组,如: <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <in
Bootstrap3 input输入框插入glyphicon图标的方法

bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站. 怎么把图标放在输入框的开头?? <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class=&quo
BootStrap点击下拉菜单项后显示一个新的输入框实现代码

我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo
bootstrap 通过加减按钮实现输入框组功能

实现效果图如下: 当我点击 + 按钮时,会添加一行输入框组:当点击 - 按钮时,会删除这一行输入框组 html代码如下: <div class="input-group" id="centerIpGroup"> <label class="input-group-addon" id="basic-addon5">中心机IP:</label> <button class="bt
C#实现基于加减按钮形式控制系统音量及静音的方法

本文实例讲述了C#实现基于加减按钮形式控制系统音量及静音的方法.分享给大家供大家参考.具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Runtime.InteropServices
android自定义加减按钮

本文实例为大家分享了android自定义加减按钮的具体代码,供大家参考,具体内容如下 1.定义两个shape: my_button_shape_normal.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectang
Quasar Input:type="number" 去掉上下小箭头实现加减按钮样式功能

实现效果 UI组件依然是使用 Quasar Framework. 先来看一下效果: 加减.gif input type="number" 去掉上下小箭头去掉上下小箭头,主要是css: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; } 实现
bootstrap输入框组代码分享

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 向输入域添加前缀和后缀的内容 <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-g
JS实现简单加减购物车效果

本文实例为大家分享了JS实现简单加减购物车的具体代码,供大家参考,具体内容如下 1.书写input输入框作为加减实现的效果. 2.加减按钮用button按钮来实现 3.利用js控制i的值作为输入框中的值. 实现的效果: 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{
Android自定义商品购买数量加减控件

在购买商品时,大家可以自定义数字加减控件,来确定购买商品的实际数量,如何实现此控件,请参考下文: 1.自定义数字加减控件的要求创建Module -NumberAddSubView A_输入的只能是数字,而且不能通过键盘输入 B_通过加减按钮操作数字 C_监听加减按钮 D_数组有最小值和最大值的限制 E_自定义属性 2.提供接口,让外界监听到数字的变化 1_设置接口 @Override public void onClick(View v) { if (v.getId() == R.id.btn
微信小程序外卖选购页实现切换分类与数量加减功能案例

本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能.分享给大家供大家参考,具体如下: 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图实现以下功能一. 点击分类项,切换右边的食品,并高亮自身这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可. categoryStates = categoryStates.map(function (item, i) { if (index == i) { i
Bootstrap CSS组件之输入框组

本文实例为大家分享了Bootstrap输入框组的具体代码,供大家参考,具体内容如下了解table-cell的表格width设置为1%的原因. http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. input-group(input-group-xs,input-group-sm,input-gr
Bootstrap基本组件学习笔记之input输入框组(9)

使用input输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap 通过加减按钮实现输入框组功能

相关推荐

随机推荐