目录

• Bootstrap-input-spinner数字增减框
• 特性
• 安装
• 使用
• html
• Script

语法和配置

• HTML
• Script
• Configuration
• decrementButton, incrementButton
• groupClass
• buttonsClass
• buttonsWidth
• textAlign
• autoDelay
• autoInterval
• boostThreshold
• boostMultiplier
• Programmatic change and read of value
• Handling attributes
• Sizing
• Events
• 使用vanilla JavaScript处理事件
• 使用jQuery处理事件

缩小版

浏览器支持

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即可。

• 点赞
• 收藏
• 分享
• 文章举报

瑞雨琼 发布了4 篇原创文章 · 获赞 0 · 访问量 187 私信 关注