bootstrap-input-spinner是一款基于bootstrap4和jquery的input輸入框數值微調插件。該插件會為輸入框添加增加和減少按鈕，通過點擊相應的按鈕，來對輸入框中的數值進行微調。

該bootstrap4 輸入框數值微調插件的特點還有：

支持移動手機，響應式設計。

支持國際化數值格式。

長按按鈕可以連續改變數值。

當數值改變時，會分派change和input事件。

安裝

可以通過npm來安裝該bootstrap4 輸入框數值微調插件。

npm install -save bootstrap-input-spinner

使用方法

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

HTML結構

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

另外，如果是浮點數，還可以通過data-decimals指定小數點后的位數。

初始化插件

在頁面DOM元素加載完畢之后，通過InputSpinner方法來初始化該bootstrap4 輸入框數值微調插件。

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

配置參數

該bootstrap4 輸入框數值微調插件的可用配置參數有：

var config = {

decrementButton: "-", // button text

incrementButton: "+", // ..

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，則使用瀏覽器的本地語言。

總結

以上是生活随笔為你收集整理的html定义微调器,bootstrap4 input数值微调插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。