Home

jQuery UI Pinpad Widget

Display an interactive PIN pad.

What is the jQuery UI Pinpad?

The jQuery UI Pinpad is a widget which can be used display a virtual pin pad on a web page. The pinpad widget must be tied to an input:text or an input:password element.

Only numeric keys and the decimal point of the numeric pad can be used on a pinpad input.

Keyboard interaction

When the pinpad is active (i.e. the pinpad output element has the focus), the following key commands are available:

• NUMPAD 0: Send key 0 of the numpad.
• NUMPAD 1: Send key 1 of the numpad.
• NUMPAD 2: Send key 2 of the numpad.
• NUMPAD 3: Send key 3 of the numpad.
• NUMPAD 4: Send key 4 of the numpad.
• NUMPAD 5: Send key 5 of the numpad.
• NUMPAD 6: Send key 6 of the numpad.
• NUMPAD 7: Send key 7 of the numpad.
• NUMPAD 8: Send key 8 of the numpad.
• NUMPAD 9: Send key 9 of the numpad.
• DECIMAL POINT: Send the decimal point key of the numpad.
• BACKSPACE: Send the backspace key only if the clear option is set to false.
• DELETE: Send the delete key to clear the pinpad content only if the clear option is set to true.
• ENTER: Send the confirm command.
• ESCAPE: Send the cancel command.

Theming

The pinpad widget uses the jQuery UI CSS framework to style its look and feel. If pinpad specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

• ui-pinpad: The outer container of the pinpad.
  • ui-pinpad-num-pad: The numeric pad container.
    • ui-pinpad-key: Numeric pad key buttons.
    • ui-pinpad-key-dec: The decimal point key button.
    • ui-pinpad-key-empty: Empty key buttons.
    • ui-pinpad-key-num-pad-[0-9]: Digit key buttons 0 to 9.
  • ui-pinpad-command-panel: The command panel container.
    • ui-pinpad-command: Command buttons.
    • ui-pinpad-command-cancel: Cancel command button.
    • ui-pinpad-command-correct: Correct command button.
    • ui-pinpad-command-confirm: Confirm command button.
    • ui-pinpad-command-{name}: Custom command button. The {name} identifies the command button.
• ui-pinpad-input: The input element that pinpad widget was instantiated with.
• ui-pinpad-output: The input element where the pinpad input value is displayed.

Dependencies

• UI Core
• Widget Factory
• Position
• Button
• Effects Core (optional; for use with the show and hide options)

Additional notes:

• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• This widget manipulates its element's value programmatically, therefore a native change event may not be fired when the element's value changes.