jquery数字加减输入框插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款jquery数字加减输入框插件。该插件兼容bootstrap框架，可以将普通的input转换为类似商城购物车中的数量加减器效果。

使用方法

在页面中引入jquery和jquery.input-counter.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.input-counter.min.js"></script>

HTML结构

该jquery数字加减输入框的基本HTML结构如下。

<div class="example">
  <button type="button" class="btn-add">
    +
  </button>
  <input type="text" class="input-counter">
  <button type="button" class="btn-subtract">
    -
  </button>
  </div>
</div>

通过data属性可以设置数字的默认值，最大值和最小值。

<input type="text" 
       class="input-counter" 
       data-min="10" 
       data-max="100" 
       data-default="20"
>

初始化插件

在页面DOM元素加完毕之后，通过下面的方法来初始化该插件。

$(".example").inputCounter();

你也可以在指定的CSS选择器。

$(".example").inputCounter({
  selectors: {
    addButtonSelector: '.btn-add',
    subtractButtonSelector: '.btn-subtract',
    inputSelector: '.input-counter',
  }
});

配置参数

$(".example").inputCounter({
  settings: {

    // check the valus is within the min and max values
    checkValue: true, 

    // is read only?
    isReadOnly: true
    
  }
});

checkValue：是否检查数字在指定范围内。

isReadOnly：是否只读。

该jquery数字加减输入框插件的github地址为：https://github.com/lk-code/jquery-input-counter