用于 Bootstrap 4 和 5 的 Easy Input Spinner 插件 - InputSpinner.js

# NPM
$ npm install bootstrap-input-spinner --save

<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>

<script src="bootstrap-input-spinner.js"></script>

<input type="number" value="5" min="0" max="100" step="1">

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

<input type="number" value="5" min="0" max="100" step="1"
       data-decimals="2"
       data-digit-grouping="false">

<input type="number" value="5" min="0" max="100" step="1"
       data-prefix=""
       data-suffix="">

<input type="number" value="5" min="0" max="100" step="1"
       inputmode="decimal">

$("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>'
   
});

changedElement.addEventListener("change", function(event) {
  valueOutput.innerHTML = changedElement.value
})

instance.setValue(new value)

instance.destroy()