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.input-spinner.js在 jQuery 之后加载 JavaScript 文件。
<script src="bootstrap-input-spinner.js"></script>3. 为输入微调器创建一个普通数字输入。该插件支持本地输入属性，例如value，min，max和step。
<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. 设置输入模式。默认值：'十进制'。
<input type="number" value="5" min="0" max="100" step="1"
inputmode="decimal">8. Available plugin options to customize the input spinner.
$("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. Event handlers:
changedElement.addEventListener("change", function(event) {
valueOutput.innerHTML = changedElement.value
})10. Change the value programmatically:
instance.setValue(new value)11. Destryo the instance.
instance.destroy()Changelog:
v3.0.2 (2021-05-28)
Compatible with Bootstrap 5
v2.1.1 (2021-05-14)
renamed back to bootstrap-input-spinner.js
v2.0.12 (2021-04-29)
prevent double creation and print warning in console
v2.0.11 (2021-04-26)
prevent failure, when destroyed element is not an input spinner
v2.0.10 (2021-03-30)
Fixed Spinner(s) not working properly after changing the value programmatically
v1.17.2 (2021-01-28)
Right-click on button sends spinner on endless increment/decrement operation
v1.17.0 (2021-01-19)
set default `keyboardStepping` `true`
v1.16.9 (2021-01-11)
update
v1.16.8 (2020-10-26)
little cleanup
v1.16.5 (2020-09-25)
added locale to props
v1.16.4 (2020-09-17)
Removed `boostMultiplier` and `data-step-max`
v1.15.4 (2020-09-14)
updated
v1.14.2 (2020-09-14)
added more examples
v1.14.1 (2020-09-08)
Styling with templates
v1.13.20 (2020-08-27)
Fixed issue with hidden attribute
v1.13.17 (2020-08-02)
Replaced + and - with the HTML entities + and −
v1.13.16 (2020-07-28)
Bugs fixed
v1.13.11 (2020-07-21)
JS Update
v1.13.10 (2020-07-20)
Fixed "Invalid regular expression" error when thousandSeparator is empty string
v1.13.6 (2020-06-06)
Allows to destroy the instance
v1.13.4 (2020-04-02)
Package update
v1.13.3 (2019-12-18)
Allow enter and space button triggers
v1.12.7 (2019-10-31)
Allow enter and space button triggers
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。