为Bootstrap框架（Bootstrap 4和5）提供了一个简单而可定制的输入微调器插件（缩小到4KB以下），使用户可以使用+/-按钮增加/减少数字。

安装：

# NPM
$ npm install bootstrap-input-spinner --save

如何使用它:

1.在html文档中加载必要的jQuery库和Bootstrap框架。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2.加载JavaScript文件输入-指针.js在jQuery之后。

<script src="bootstrap-input-spinner.js"></script>

3.为输入微调器创建一个普通数字输入。该插件支持本地输入属性，例如价值,最小值,最大值和步.

<input type="number" value="5" min="0" max="100" step="1">

4.通过调用数字输入上的函数来初始化输入微调器。

$("input[type='number']").inputSpinner();

5.如果要限制小数位数并禁用千位分隔符：

<input type="number" value="5" min="0" max="100" step="1"
       data-decimals="2"
       data-digit-grouping="false">

6.为输入元素添加前缀和后缀

<input type="number" value="5" min="0" max="100" step="1"
       data-prefix=""
       data-suffix="">

7.设置输入模式。默认值：“decimal”。

<input type="number" value="5" min="0" max="100" step="1"
       inputmode="decimal">

8.可用于自定义输入微调器的插件选项。

$("input[type='number']").inputSpinner({
 
  // button text/icons
  decrementButton: "<strong>-</strong>", 
  incrementButton: "<strong>+</strong>", 
 
  // class of input group
  groupClass: "input-group-spinner",
 
  // button class
  buttonsClass: "btn-outline-secondary",
 
  // button width
  buttonsWidth: "2.5em",
 
  // text alignment
  textAlign: "center",
 
  // delay in milliseconds
  autoDelay: 500, 
 
  // interval in milliseconds
  autoInterval: 100,
 
  // set this `true` to disable the possibility to enter or paste the number via keyboard
  buttonsOnly: false, 
 
  // set this to `false` to disallow the use of the up and down arrow keys to step
  keyboardStepping: true, 
 
  // the locale, per default detected automatically from the browser
  locale: navigator.language, 
 
  // the editor (parsing and rendering of the input)
  editor: I18nEditor, 
  
  // the template of the input
  template: // the template of the input
    '<div class="input-group ${groupClass}">' +
    '<div class="input-group-prepend"><button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass} btn-minus" type="button">${decrementButton}</button></div>' +
    '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control form-control-text-input"/>' +
    '<div class="input-group-append"><button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass} btn-plus" type="button">${incrementButton}</button></div>' +
    '</div>'
  
});

9.事件处理程序：

changedElement.addEventListener("change", function(event) {
  valueOutput.innerHTML = changedElement.value
})

10.以编程方式更改值：

instance.setValue(new value)

11.销毁实例。

instance.destroy()

更新日志：

版本3.2.0（2023-03-09）

• 将id后缀从“_MP_cBdLN29i2”更改为“：input_spinner”。

版本3.1.14（2022-11-24）

• var=>let/常量

版本3.1.13（2022-08-06）

• 固定：最小值最大值和值同时变化

版本3.1.12（2022-06-11）

• 停止聚焦

第3.1.8版（2022-01-21）

• 针对Bootstrap 5更新

v3.1.7 (2021-10-04)

• 修复文档中的错误更改事件。body

v3.1.2 (2021-10-02)

• 代码清理

v3.0.3 (2021-09-14)

• 没有带“autoInterval:undefined”的自动间隔

v3.0.2 (2021-05-28)

• 与Bootstrap 5兼容

v2.1.1 (2021-05-14)

• 重命名回bootstrap-put-spinner.js

2.0.12版（2021-04-29）

• 防止在控制台中重复创建和打印警告

2.0.11版（2021-04-26）

• 当被破坏的元素不是输入微调器时，防止失败

2.0.10版（2021-03-30）

• 修复了以编程方式更改值后Spinner无法正常工作的问题

v1.17.2 (2021-01-28)

• 右键单击按钮可发送无休止递增/递减操作的微调器

v1.17.0 (2021-01-19)

• 设置默认`keyboardSteping``true`

v1.16.9 (2021-01-11)

• 使现代化

v1.16.8 (2020-10-26)

• 少量清理

v1.16.5 (2020-09-25)

• 已将区域设置添加到道具

v1.16.4 (2020-09-17)

• 删除了“boostMultiplier”和“data step max”`

v1.15.4 (2020-09-14)

• 已更新

v1.14.2 (2020-09-14)

• 添加了更多示例

v1.14.1 (2020-09-08)

• 使用模板设置样式

v1.13.20 (2020-08-27)

• 修复了隐藏属性的问题

v1.13.17 (2020-08-02)

• 将+和-替换为HTML实体&plus；和减号；

v1.13.16 (2020-07-28)

• 已修复Bug

v1.13.11 (2020-07-21)

• JS更新

v1.13.10 (2020-07-20)

• 修复了当thousandSeparator为空字符串时出现的“无效正则表达式”错误

v1.13.6 (2020-06-06)

• 允许销毁实例

v1.13.4 (2020-04-02)

• 程序包更新

v1.13.3 (2019-12-18)

• 允许输入和空格按钮触发器

v1.12.7 (2019-10-31)

• 允许输入和空格按钮触发器

 

预览截图

简易输入微调器插件 Bootstrap程序4和5 InputSpinner.js