jQuery.NumPad is mainly intended to be used in mobile web applications to quickly input numbers. It is an alternative to the native on-screen numeric keyboard of iOS, Android, etc. The main advantages are:
- Security
Keyloggers can't intercept the input. - Speed
The virtual numpad comes up faster, than the native on-screen keyboard on mobile devices. - No viewport resizing
The numpad floats over the page and does not squeeze on small screens like mobile on-screen keyboards do.
Quick Start
Just call numpad() on any jQuery object to make a keypad pop up every time that object is clicked. Use numpad('open') to open the numpad programmatically (e.g. bound to some other event).
<link rel="stylesheet" href="path_to_numpad_folder/jquery.numpad.css">
<script type="text/javascript" src="path_to_numpad_folder/jquery.numpad.js"></script>
<script type="text/javascript">
// Initialize the numpad
$('selector').numpad();
</script>
Demo
The demos below show, how jQuery.NumPad can be used within a Boostrap based application. See more details on integrating jQuery.NumPad into different frameworks in the examples section.Form controls
You can either enforce using the virtual numpad on an input field or create an input group with a spearate button to trigger the numpad. The former approach is recommended for PIN codes and passwords as it definately makes it impossible for key loggers to intercept the input. The latter way will be more comfortable, if you want the user to be able to use the regular keyboard too.Table
You don't necessarily need to use input fields for jQuery.NumPad to work! In this example, it is being used for all table cells with a certain css class. This way, you can enable table editing just in a few clicks!| Product | Price | Quantity |
|---|---|---|
| XXL Keyboard | 29,95 | 1 |
| XXL Mouse | 19,95 | 1 |
| DVD-RW | 1,95 | 20 |
The options listed below can be passed to numpad() as a configuration object.
// Default options for an entire page can be specified via
$.fn.numpad.defaults.optionName = optionValue;
// Options can be set for every numpad by passing an object argument to numpad()
$('selector2').numpad({optionName: optionValue});
| Option | Default | Description |
|---|---|---|
| General options | ||
| target | false | a jQuery element, to put the input from the keypad to. If set to false, the element, on which numpad is called, will be used. |
| openOnEvent | 'click' | name of the event to trigger opening the numpad. |
| appendKeypadTo | false | the jQuery elemnt, that the keypad should be appended to. If set to false, $(document) will be used. |
| decimalSeparator | ',' | The character to be used to separate the fractional part of decimal numbers. |
| hidePlusMinusButton | false | If set to TRUE, the button to switch between positive and negative numbers will not be displayed (usefull if you only want positive numbers) |
| hideDecimalButton | false | If set to TRUE, the button to enter the decimal separator will not be displayed (usefull if you only want whole numbers) |
| position | 'fixed' | position of the keypad. Fixed position can be defined by setting positionX and positionY. |
| positionX | 'center' | horizontal position of the keypad relative to the visible window. Possible values: left, right, center or a integer value. |
| positionY | 'middle' | vertical position of the keypad relative to the visible window. Possible values: top, bottom, middle or an integer value. |
| Template options | ||
| backgroundTpl | '<div></div>' | Template for the background overlay behind the Keypad |
| gridTpl | '<table></table>' | Template for the keypad grid |
| displayTpl | '<input type="number" />' | Template for the display field above the keypad |
| displayCellTpl | '<td colspan="4"></td>' | Template for the grid cell, where the display field is located |
| rowTpl | '<tr></tr>' | Template for each row of the grid |
| cellTpl | '<td></td>' | Template for each regular cell of the grid |
| buttonNumberTpl | '<button></button>' | Template for the number buttons |
| buttonFunctionTpl | '<button></button>' | Template for the functional buttonslike clear, done, etc. |
| Translation options | ||
| textDone | 'Done' | Text of the done button |
| textDelete | 'Del' | Text of the delete or backspace button |
| textClear | 'Clear' | Text of the clear button |
| textCancel | 'Cancel' | Text of the cancel button |
| Callbacks | ||
| onKeypadCreate | false | Callback function, that is called once a numpad is created (right after initialization). Using this callback the keypad can be customized by regular javascript. The event is dispatched once for each keypad. It is not dispatched when the keypad is shown! |
| onKeypadOpen | false |
Callback function, that is called once the numpad has been opened. This can be used, for example, to calculate the value to be shown: // Prefill the keypad value from another element
onKeypadOpen: function(){
$(this).find('.nmpd-display').val($('#someId').val()+1);
}
|
| onKeypadClose | false |
Callback function, that is called once the numpad has been closed. This can be used, for example, for some postprocessing of the input value like sending it to the server, copying it to another control, updating controls using custom setters, etc.: // Copy the input value to another element
onKeypadClose: function(){
$('#someId').val($(this).find('.nmpd-display').val());
}
|
| onChange | false |
Callback function, called everytime the user changes the value in the display of the numpad by pressing a virtual button. The callback gets the current value passed as the second parameter after the event itself. This callback will also get called if the value gets cleard or the delete button is pressed - simply every time something changes via user interaction. // Validate the input every time the user presses a virtual button
onChange: function(event, value){
validate(value);
}
|
...coming soon!
...coming soon!
Download from GitHub!
jQuery.NumPad is completely free and licensed under MIT. If you like the plugin and wish to support further development, you can show your appriciation by a donation. Even small donations are a great support!
Thank you!
