Customizable POS Pin Pad Widget For jQuery UI - Pinpad

Pinpad is a jQuery & jQuery UI widget used to generate a customizable, touch-friendly, POS Pin Pad-style numeric keypad for easier password, credit card number and personal identification number input.

More features:

• Keyboard interaction.
• i18n support.
• Custom themes.
• Digit only mode.
• Auto hide when reaching the length limit.

See also:

• Mobile-friendly Numeric Keypad Plugin For jQuery - NumPad

How to use it:

1. To use this plugin/widget, you first need to load jQuery library and jQuery UI files in the webpage.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Download the plugin and load the jQuery Pinpad's JS & CSS files in the page.

<link rel="stylesheet" href="jquery.ui.pinpad.css">
<script src="jquery.ui.pinpad.js"></script>

3. Call the function pinpad() to create a default pin pad for a given input field.

$("input#pinpad").pinpad();

4. Possible plugin options to customize the pin pad.

$("input#pinpad").pinpad({
/**
   * Specify the container of the pinpad widget. Must be a valid HTML element or jQuery
   * selector. If no matching DOM element is found during rendering, the widget is
   * inserted directly after the pinpad input.
   */
  appendTo: null,

  /**
   * Specify whether the confirm event is triggered when the pinpad input value length
   * reach its max length.
   */
  autoComplete: false,

  /**
   * Specify additional classes to add to the widget element.
   */
  classes: {
      "ui-pinpad": "ui-corner-all"
  },

  /**
   * Specify whether the correct command of the pinpad widget must clear the input
   * content. If set to true, the correct command clears the pin pad input content,
   * otherwise only the last inserted character is removed.
   */
  clear: false,

  /**
   * Defines the command buttons of this pin pad.
   */
  commands: [
      {
          position: 0,
          name: "cancel",
          options: { icon: "ui-icon-close", iconPosition: "end" }
      },
      {
          position: 1,
          name: "correct",
          options: { icon: "ui-icon-caret-1-w", iconPosition: "end" }
      },
      {
          position: 2,
          name: "confirm",
          options: { icon: "ui-icon-radio-off", iconPosition: "end" }
      }
  ],

  /**
   * Specify whether the pin pad input accept only digits. If set to true, the pinpad
   * input should not accept the decimal point.
   */
  digitOnly: false,

  /**
   * Specify settings for localization.
   */
  display: {
      decPoint: ".",
      cancel: "Cancel",
      correct: "Correct",
      confirm: "Confirm"
  },

  /**
   * If and how to animate the hiding of the pinpad widget.
   */
  hide: true,

  /**
   * Defines the pin pad keys layout.
   */
  keys: [
      "1 2 3",
      "4 5 6",
      "7 8 9",
      "{empty} 0 {dec}"
  ],

  /**
   * Specify the minimum number of characters allowed to enable the confirm command.
   */
  minLength: 0,

  /**
   * Specify the maximum number of characters allowed in the pin pad input.
   */
  maxLength: Number.POSITIVE_INFINITY,

  /**
   * If and how to animate the showing of the pinpad widget.
   */
  show: true,
});

5. Callback functions available.

$("input#pinpad").pinpad({
  cancel: null,
  change: null,
  close: null,
  confirm: null,
  keypress: null,
  open: null
});

Change log:

2017-09-10

• v1.6.0

---

This awesome jQuery plugin is developed by yannickebongue. For more Advanced Usages, please check the demo page or visit the official website.