JQuery plugin To Add Number Spinner Input With Virtual Keypad


JQuery Number Control implanted a JQuery plugin to add a mobile-compatible virtual keyboard.

A feature-rich, mobile-friendly, and easy-to-use jQuery extension (also called rotary input, number input, and number picker) to choose a number with the – / + buttons.


Specify a custom keyboard layout. This has placeholders for all functions/input controls. These are surrounded by curly braces {}. The current buttons are:

  • Numbers 0-9
  • SEP
  • UP
  • DOWN
  • DONE

How to make use of it:

1. To use this, load the next JavaScript and CSS file within the doc.

<!-- 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 subject and specify the min/max values if wanted.

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

3. Call the function numbercontrol on the input subject to create a fundamental quantity spinner.


4. Customize the quantity spinner by overriding the default choices.


  // 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 digital keypad.


  // 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']


Spinner Input With Virtual Keypad, JQuery Number Control Plugin/Github

See Demo And Download

Official Website(jdarwood007): Click Here

This superior jQuery/javascript plugin is developed by jdarwood007. For extra Advanced Usages, please go to the official website.