jQuery Plugin for Simple Virtual Keyboard - keypad
File Size: | 100 KB |
---|---|
Views Total: | 12702 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

keypad is a simple jQuery plugin that adds a customizable virtual keyboard next to your input field when focused on.
Basic Usage:
1. Include jQuery library and keypad in your head section
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.keypad.js"></script>
2. Include keypad CSS
<link type="text/css" href="jquery.keypad.css" rel="stylesheet">
3. The HTML Markup
<input type="text" id="defaultKeypad">
4. Call the plugin with default options.
$(function () { $('#defaultKeypad').keypad(); });
5. Default settins.
$('#defaultKeypad').keypad({ // 'focus' for popup on focus, 'button' for trigger button, or 'both' for either. showOn: 'focus', // URL for trigger button image. buttonImage: '', // ture if the image appears alone, // false if it appears on a button. buttonImageOnly: false, // Name of jQuery animation for popup. showAnim: 'show', // Options for enhanced animations. showOptions: null, // Duration of display/closure as a named speed or in milliseconds. duration: 'normal', // Display text following the text field, e.g. showing the format. appendText: '', // true to add ThemeRoller classes. useThemeRoller: false, // Additional CSS class for the keypad for an instance. keypadClass: '', // Display text at the top of the keypad. prompt: '', // Layout of keys. One string per row. layout: [], // Set at the end // Separator character between keys in the layout separator: '', // Input target for an inline keypad. target: null, // true for entry only via the keypad, // false for real keyboard too. keypadOnly: true, // true to randomise the alphabetic key positions, // false to keep them in order. randomiseAlphabetic: false, // true to randomise the numeric key positions, // false to keep rhem in order. randomiseNumeric: false, // true to randomise the other key positions, // false to keep them in order. randomiseOther: false, // true to randomise all key positions, // false to keep them in order. randomiseAll: false, // Callback before showing the keypad. beforeShow: null, // Callback when a key is selected. onKeypress: null, // Callback when the panel is closed onClose: null });
Changelog:
v2.1.1 (2019-01-10)
- Corrected back and clear buttons handling
v2.1.0 (2016-12-18)
- Corrected randomisation and randomised layout
- Corrected width calculation for multiple keypads
- Corrected special keystrokes in onKeyPress
- JSHint corrections
- Better inline JSDoc
v2.0.1 (2014-09-20)
- Namespaced external click check to allow it to easily be removed.
- Corrected hide method
- Changed to  
- Added Norwegian and Polish localisations
v2.0.0 (2014-02-01)
- Updated underlying plugin framework
- Updated for jQuery UI 1.10
- Marker class changed from hasKeypad to is-keypad
- Added numericLayout property
- Changed regional to regionalOptions
- Added Slovak localisation
This awesome jQuery plugin is developed by kbwood. For more Advanced Usages, please check the demo page or visit the official website.