jQuery Plugin for Simple Virtual Keyboard - keypad

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.