Spinner Input With Virtual Keypad - jQuery Number Control

A feature-rich, mobile-compatible, and user-friendly number spinner (also called input spinner, number input, and number picker) jQuery plugin for picking a number by using -/+ buttons.

More Features:

• Increment and decrement with up/down arrows.
• Displays a numerical keyboard when picking numbers.
• Compatible with the latest Bootstrap framework.

How to use it:

1. To use this, load the following JavaScript and CSS file in the document.

<!-- Bootstrap (Recommended but not Required) -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Open Iconic Font (Recommended but not Required) -->
<link rel="stylesheet" href="/path/to/cdn/open-iconic-bootstrap.min.css" />
<!-- Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- jQuery Number Control -->
<script src="./jquery-numbercontrol.js"></script>

2. Create an input field and specify the min/max values if needed:

<input type="text" id="numbercontrol" value="1" min="-100" max="100" />

3. Call the function numbercontrol on the input field to create a basic number spinner.

$(function(){
  $('#numbercontrol').numbercontrol();
});

4. Customize the number spinner by overriding the default options as shown below:

$('#numbercontrol').numbercontrol({

  // debug mode
  debug: false,

  // custom decimal separator
  separator: '.',

  // input type
  type: 'number',

  // custom decrement button
 prependHtml: '<div class="input-group-prepend"><button class="btn btn-decrease btn-outline-secondary px-1"><span class="oi oi-minus" /></button></div>',

  // custom increment button
  appendHtml: '<div class="input-group-append"><button class="btn btn-increase btn-outline-secondary px-1"><span class="oi oi-plus" /></button></div>',

  // CSS class of parent container
  inputParentCss: 'input-group numberControl',

  // tag of parent container
  inputParent: 'div',

  // CSS class of number input
  inputCss: 'numberControlInput form-control px-1',

  // trigger events
  bindButtonEvents: 'click tap touch touchstart',
  
});

5. Customize the virtual keypad.

$('#numbercontrol').numbercontrol({

  // custom icons here
  keyboardLanguage: {
    'UP' : '<span class="oi oi-chevron-top" />',
    'DOWN' : '<span class="oi oi-chevron-bottom" />',
    'INVERSE' : '<span class="oi oi-transfer" />',
    'SEP' : '<span class="oi oi-media-record" />',
  },

  // specify custom HTML for buttons
  keyboardControl: {},

  // custom buttons
  buttons: [...Array(10).keys(), 'DELETE', 'CLEAR', 'DONE', 'CANCEL', 'UP', 'DOWN', 'SEP', 'INVERSE']

});

Changelog:

2023-11-20

• Add bg-body to default table

2021-11-25

• Fixed a bug where if inputParent was empty, nothing would render.

2021-11-17

• Cleanup the implantation of customParseFloat

2021-10-16

• Touchstart and click may cause a double fire event on mobile devices

2021-10-14

• JS Update

2021-06-12

• Fixed a issue with precision when using floats/decimals

---

This awesome jQuery plugin is developed by jdarwood007. For more Advanced Usages, please check the demo page or visit the official website.