A virtual JS number pad for mobile devices with decimal control
.github | Cleanup, enforce style and standards | 2021-02-23 08:33:07 | |
---|---|---|---|
.eslintrc.js | 488 B | Cleanup, enforce style and standards | 2021-02-23 08:33:07 |
.gitignore | 54 B | Cleanup, enforce style and standards | 2021-02-23 08:33:07 |
LICENSE.txt | 1.46 KB | Initial commit | 2021-02-22 06:20:19 |
README.md | 6.32 KB | Initial commit | 2021-02-22 06:20:19 |
jquery-numbercontrol.js | 11.92 KB | Fixed a issue with precision when using floats/decimals Added focus as a default event to bind to | 2021-06-11 14:18:00 |
test.html | 1.13 KB | Initial commit | 2021-02-22 06:20:19 |
Implants a plugin for JQuery to add number spinner that is mobile friendly and a virtual keyboard.
$(document).ready(function() {
$('#numbercontrol').numbercontrol();
});
<input type="text" id="numbercontrol" value="1" min="-500" max="500" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./jquery-numbercontrol.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log('loading');
$('#numbercontrol').numbercontrol();
});
</script>
This plugin supports working with input type="number", decimal and text. It will detect usage of min, max and step attributes on the input tag. These can be optionally specified in the loading of the numbercontrol plugin. The priority of the options are
Optionally override an input type. By default it sets to "number"
Disable the virtual keyboard popup upon clicking the input.
decimal separator
Any valid character such as period (.) or comma (,).
Wraps the input object in a container.
Any valid HTML. This should be kept basic. If multiple nested html containers are used, the default logic is to find the nearest container to the input object as the "parent" container.
<div class="input-group numberControl"></div>
Optionally specify the parent selector. If left blank, we locate the nearest parent to the input object.
Specify css to add to the input object
numberControlInput form-control px-1
Specify different HTML to prepend to the input object
<div class="input-group-prepend"><button class="btn btn-decrease btn-outline-secondary px-1"><span class="oi oi-minus" /></button></div>
Specify different HTML to append to the input object
<div class="input-group-append"><button class="btn btn-increase btn-outline-secondary px-1"><span class="oi oi-plus" /></button></div>
Optionally Disables the default HTML 5 spin (Increase/Decrease buttons) fix when input type is number/decimal. By default this plugin will append a style fix to the body element to hide this.
Optionally specify events used to trigger buttons/inputs.
click tap touch touchstart
Optionally specify where to attach the virtual keyboard. If left blank, it is appended the nearest to the input object.
Specify a custom keyboard layout. This has placeholders for all functions/input controls. These are surrounded by curly braces {}. The current buttons are:
Optionally specify custom HTML for any button. This will be replaced with the layout placeholders on initialization. The INPUTBOX control placeholder optionally can hold {VAL} which will be replaced with the current value. All others can optionally contain a {[CONTROL]_LANG} which will replace the button with the appropriate language for the button. The button object should contain a "data-function" which indicates which control function it should trigger.
If a custom function is needed the function should be specified in "data-custom-function"
Optionally specify a custom language string for any control button.
Add a custom event handler before any logic has been applied to the input object.
Add a custom event handler after all logic has been applied to the input object.
Add a custom event handler before clicking the decrease button built in event triggers
Add a custom event handler after clicking the decrease button built in event triggers
Add a custom event handler before clicking the increase button built in event triggers
Add a custom event handler after clicking the increase button built in event triggers
Add a custom event handler before the initialization of the virtual keyboard.
Add a custom event handler after the initialization of the virtual keyboard.
Add a custom event handler before the opening of the virtual keyboard.
Add a custom event handler after the opening of the virtual keyboard.
Add a custom event handler before the trigger of a keyboard button.