bootstrap-input-spinner是一款基于bootstrap4和jquery的input输入框数值微调插件。插件将向输入框中添加添加和删除按钮，并通过单击相应的按钮来微调输入框中的值。
BooTrasP4输入框数字调谐插件的特点如下：
支持手机，响应设计。
支持国际化的数字格式。
连续按下按钮以改变值。
当值改变时，改变和输入事件被调度。

安装

可以通过npm来安装该bootstrap4 输入框数值微调插件。

npm install -save bootstrap-input-spinner

使用方法

在页面中引入jquery和bootstrap4相关文件，以及InputSpinner.js。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="InputSpinner.js.js"></script>

HTML结构

在输入框input元素里添加min、max和step属性。

<input type="number" value="50" min="0" max="100" step="10"/>

另外，如果是浮点数，还可以通过data-decimals指定小数点后的位数。

<input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>

初始化插件

在页面DOM元素加载完毕之后，通过InputSpinner方法来初始化该bootstrap4 输入框数值微调插件。

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

配置参数

该bootstrap4 输入框数值微调插件的可用配置参数有：

var config = {
	decrementButton: "<strong>-</strong>", // button text
	incrementButton: "<strong>+</strong>", // ..
	groupClass: "", // css class of the input-group (sizing with input-group-sm or input-group-lg)
	buttonsClass: "btn-outline-secondary",
	buttonsWidth: "2.5em",
	textAlign: "center",
	autoDelay: 500, // ms holding before auto value change
	autoInterval: 100, // speed of auto value change
	boostThreshold: 15, // boost after these steps
	boostMultiplier: 4,
	locale: null // the locale for number rendering; if null, the browsers language is used
}

decrementButton：数值减少按钮上的文本。
incrementButton：数值增加按钮上的文本。
groupClass：input-group上的class类。
buttonsClass：按钮的class类。
buttonsWidth：按钮的宽度。
textAlign：文本对齐方式。
autoDelay：长按按钮时触发数值改变的延迟时间。
autoInterval：长按按钮时触发数值改变的间隔时间。
boostThreshold：默认值为15。
boostMultiplier：默认值为4。
locale：数值本地化。如果为null，则使用浏览器的本地语言。

源码来源：https://github.com/shaack/bootstrap-input-spinner

在线预览 网盘下载