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