Press "Enter" to skip to content

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.

keyboardLayout

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
  • INPUTBOX
  • DELETE
  • SEP
  • UP
  • DOWN
  • CLEAR
  • INVERSE
  • 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.

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

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

$('#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 digital 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']

});

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *