Bootstrap-input-spinner数字增减框
一个Bootstrap 4 / jQuery插件，用于数字输入并创建输入微调按钮。
特性
Bootstrap 4 InputSpinner是：
1.支持移动端且反应迅速。
2.点击按钮会自动更改值，长按按钮会持续更改值。
3.支持国际化数字格式。
4.允许设置值前缀和后缀。
5.可像普通元素一样使用val()。
6.动态更改元素属性。
7.更改值时触发事件。
8.无需额外的CSS，仅需导入Bootstrap4的标准CSS。
安装
npm install -save bootstrap-input-spinner
或者在GitHub下载src / bootstrap-input-spinner.js。
使用
html
在HTML中创建元素。 创建input框并设置 type =“ number”。
<input type="number" value="50" min="0" max="100" step="10"/>
Script
这是一个jQuery插件。 因此，使用以下脚本为所有类型为"number"的输入启用InputSpinner。
<script src="./src/bootstrap-input-spinner.js"></script>
<script>
$("input[type='number']").inputSpinner();
</script>
无需额外的CSS，只需Bootstrap 4和jQuery。
语法和配置
HTML
<input type="number" value="4.5" min="0" max="9" step="0.1" data-decimals="2" data-suffix="°C"/>
使用这些属性来配置：
- value //元素创建的起始值
- min //步进时的最小值
- max //步进时的最大值
- step //增长值
- inputmode //输入模式，默认为“ decimal”（显示触摸设备上的十进制键盘）
- data-step-max //步进时最大提升
- data-decimals //显示的小数位
- data-digit-grouping //“false"禁用分组（千位分隔符），默认为"true”
- data-prefix //在输入元素中显示前缀文本
- data-suffix //在输入元素中显示后缀文本
InputSpinnerh也处理标准输入框属性，required, disabled, readonly和placeholder。
Script
使用JavaScript将实例创建为jQuery插件。 您可以在对象中提供其他配置作为config参数。
$(element).inputSpinner(config);
Configuration
默认配置为：
var config = {
decrementButton: "<strong>-</strong>", // 按钮文本
incrementButton: "<strong>+</strong>", // ..
groupClass: "", // 输入组的CSS类
buttonsClass: "btn-outline-secondary",
buttonsWidth: "2.5rem",
textAlign: "center",
autoDelay: 500, // 自动值更改前保持 ms
autoInterval: 100, // 自动值更改速度
boostThreshold: 10, // boost after these steps
boostMultiplier: "auto" // you can also set a constant number as multiplier
}
从浏览器设置中检测到数字格式的语言环境。
decrementButton, incrementButton
按钮内文本的HTML
groupClass
输入组的附加CSS类，源码：
<div class="input-group ' + config.groupClass + '">
buttonsClass
按钮的css类。 如此处所述，使用它来设置递增和递减按钮的样式。 比如buttonClass：btn-primary或btn-success或您想要的任何类型的按钮。
buttonsWidth
增量和减量按钮的宽度。
textAlign
<input> 内部的文本对齐方式
autoDelay
按住递增或递减按钮后，输入将自动更改值的延迟（以毫秒为单位）。
autoInterval
按住按钮时的值更改速度（以毫秒为单位）。 较低的值使其更快。
boostThreshold
这些自动值更改后，将以boostMultiplier的速度增加。
boostMultiplier
自动值更改的boostThreshold步骤后的速度乘数。 如果设置为“自动”（默认值），乘数将随着时间增加。
Programmatic change and read of value
更改或读取值只需在输入上使用jQuery的val()函数，就像这样：
var currentValue = $(element).val() // 读
$(element).val(newValue) // 写
提示：在 vanilla JS中使用element.value读取值也可以，但是要设置该值，您必须使用element.setValue(newValue)或$(element).val(newValue)
Handling attributes
属性min, max, step, stepMax, decimals, placeholder, required, disabled, readonly和class是动态处理的。 类属性值被动态复制到输入元素。
Sizing
如果将原始元素类设置为form-control-lg的form-control-sm，则将所得输入组的类动态设置为input-group-sm或input-group-lg。
Events
InputSpinner处理input和change事件，例如本地元素。
使用vanilla JavaScript处理事件
element.addEventListener("change", function(event) {
newValue = this.value
})
使用jQuery处理事件
$(element).on("change", function (event) {
newValue = $(this).val()
})
缩小版
我不提供缩小版本，因为我认为应该由使用程序员来创建缩小版本，并将所有使用的脚本源都链接到一个文件中。
但是，如果您愿意，可以使用uglify轻松创建缩小版本：https://www.npmjs.com/package/uglify-js
只需安装uglify。
npm install uglify-js -g
然后在src文件夹中：
uglifyjs bootstrap-input-spinner.js --compress --mangle > bootstrap-input-spinner.min.js
浏览器支持
bootstrap-input-spinner可在所有现代浏览器和Internet Explorer中使用。 未通过IE <11进行测试。
对于较旧的浏览器（IE 9或更高版本），它不支持Intl，当您收到诸如“Intl is not defined”之类的错误消息时，只需使用Shim或polyfill之类的Intl.js即可。
来源：CSDN
作者：瑞雨琼
链接：https://blog.csdn.net/w1529132313/article/details/104022088