bootstrap-input-spinner

A Bootstrap 4 / jQuery plugin to create input spinner elements for number input.

Examples

整数

<input type="number" value="500" min="0" max="1000" step="10">

浮点数

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

输入框尺寸

You can set the group css class via configuration.

Small

$("input.small").InputSpinner({groupClass: "input-group-sm"})

Large

$("input.large").InputSpinner({groupClass: "input-group-lg"})

处理 `change` 和 `input` 事件

Value:

changedElement.addEventListener("change", function(event) { // works also with `ìnput`
    valueOutput.innerHTML = changedElement.value
})

通过编程修改值

Net

Gross (+19%)

inputNet.addEventListener("change", function(event) {
    inputGross.setValue(inputNet.value * 1.19) // use `setValue` instead of `value=`
})
inputGross.addEventListener("change", function(event) {
    inputNet.setValue(inputGross.value / 1.19)
})

Classes 'is-invalid' and 'is-valid'; properties 'required' and 'placeholder'

To enable server-side validation, the classes 'is-invalid' and 'is-valid' of the original input are copied to the created input element. Also 'required' and 'placeholder' are copied.

<input placeholder="Enter a number" required type="number" value="" min="-100" max="100">

Script

This script enables the InputSpinner for all inputs with type='number' on this page. No extra css needed, just Bootstrap 4.

<script>
    $("input[type='number']").InputSpinner()
</script>


适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

来源:站长素材